学习笔记：HTML5 Canvas绘制简单图形

　HTML5 Canvas绘制简单图形

　　1.添加Canvas标签，添加id供js操作。

    <canvas id="mycanvas" height="700" width="1024" style="border:1px solid #aaa;text-align:center;">
    你的浏览器不支持Canvas，请更新浏览器再试！！！
    </canvas>

　　在canvas标签之间应该做浏览器是否支持的检测，如果浏览器支持canvas，标签首尾之间的这段文字会直接被忽略的。当然实际工作中应该不只是这么一句简单提示就可以了。

　　2.获取context，调用moveTo(),lineTo(),stroke()方法绘制线。　　

 

var canvas =document.getElementById("mycanvas");
            //canvas.height=700;
            //canvas.width=1024;
            var context=canvas.getContext("2d");//2d画布
            if(!context)
            {            
                alert("你的浏览器不支持Canvas，请更新浏览器再试！！！");
                return;                
            }
            context.moveTo(100,100);//画笔起点
            context.lineTo(500,500);//从上一点将要绘制的终点
            context.lineWidth=3;//线条宽度
            context.strokeStyle="red";//线条颜色
            //canvas绘制是基于状态的，上面的代码只是定义了canvas将要绘制什么
            //所以代码执行这里，画布上还没有实际绘制任何元素
            context.stroke();//开始绘制

View Code