H5-Canvas慕课01-绘制直线、多边形、七巧板

*/
<canvas id="canvas" width="1024" height="768"
style="border:1px solid #aaa;display:block;margin:50px auto;">
/*解决浏览器兼容问题
方法一：
只有当浏览器不支持时才会出现标签中的内容*/
当前浏览器不支持canvas，请更换浏览器之后再试
</canvas>

<script type="text/javascript">
window.onload = function(){
//初始化
var canvas= document.getElementById('canvas');

//画布的大小可以通过js方式指定,也可以在标签内指定；但不建议通过css样式指定
// canvas.width=1024;
// canvas.height=768;

/*解决浏览器兼容问题
方法二：
通过js给出提示，判断绘图的上下文环境是否为空！*/
/*if (canvas.getContext("2d")) {

//得到绘图的上下文环境2D
var context = canvas.getContext("2d");
}else{
alert('当前浏览器不支持canvas，请更换浏览器之后再试');
};*/

//得到绘图的上下文环境2D
var context = canvas.getContext("2d");

/*使用canvas绘制,context提供了真正绘制的接口，
在画布的系统中，以左上角为原点，向右为x轴正方向，向下为y轴正方向*/
context.beginPath();
context.moveTo(100,100);//定义一个路径
context.lineTo(700,700);//定义一个路径
context.lineTo(100,700);
context.lineTo(100,100);
context.closePath();

context.lineWidth=5;//线条的宽度
context.strokeStyle="red";//线条的样式，主要指颜色，可使用css的颜色格式
context.stroke();//stroke是笔画，在canvas里是绘制线条

/*给多边形填充颜色的方法context.fill()*/
/*context.fillStyle="rgb(2,100,3)";//rgb设置颜色的方法
context.fill();*/

/*以上是绘制一个线段一个多边形，下面绘制第二个线段。
注意：绘制开始时使用context.beginPath();
结束时使用context.closePath();
原因：canvas是基于状态进行绘制的，在第二次调用stroke()方法时，context.strokeStyle
的样式会覆盖上面三角形的样式。
*/
context.beginPath();//定义多个路径时使用
context.moveTo(200,100);
context.lineTo(700,600);
context.closePath();

context.strokeStyle="blue";
context.stroke();
}

</script>