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

1，canvas绘制多边形基础





Canvas Examples





/*
canvas是基于状态进行绘制的。

*/
<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>

2，canvas绘制七巧板代码

七巧板示例






当前浏览器不支持canvas，请更换浏览器之后再试