【html5】canvas的基础(画布)

第一丶

首先在HTML中写个canvas标签

<body>
    <canvas id="chen" width='600' height='200'>
        
    </canvas>
</body>

注意:要定义canvas标签的宽高一定要写行内样式,不要用CSS中的style方式来写它的宽高

第二丶

在JS中操作画布

<script type="text/javascript">
    var canvas=document.querySelector("#chen");//找到画布才能操作
    var c=canvas.getContext('2d');//定义画布为2d
    c.strokeStyle="#f23";//给画布中生成的线条填充颜色
    c.moveTo(30,10);//开始点
    c.lineTo(60,10);//让开始点连到这个点
    c.lineTo(60,45);//让开始点连到这个点
    c.stroke();//将完成绘图            

    c.moveTo(40,20);
    c.lineTo(40,60);
    c.lineTo(65,60);
    c.lineTo(65,90);
    c.lineTo(40,90)
    c.stroke();

    c.moveTo(30,75);
    c.lineTo(60,75);
    c.stroke();
</script>

第三丶

closePath()#闭合路径

    var canvas=document.querySelector("#chen");//找到画布才能操作
    var c=canvas.getContext('2d');//定义画布为2d
    c.strokeStyle="#f23";//给画布中生成的线条填充颜色,也可以使用c.strokeStyle="rgba(233,233,233,0.8)"
    c.moveTo(30,10);//开始点
    c.lineTo(60,10);//让开始点连到这个点
    c.lineTo(60,45);//让开始点连到这个点
    c.closePath();//将这些点用线连接起来，形成闭合路线    
　　 c.stroke();//完成绘图

结果为:

没有closePath的结果为:

第四丶


lineWidth设置线宽（就是线的粗系）

c.lineWidth="2";

第五丶

填充工作

    var canvas=document.querySelector("#chen");//找到画布才能操作
    var c=canvas.getContext('2d');//定义画布为2d
    c.strokeStyle="#f23";//给画布中生成的线条填充颜色
    c.moveTo(30,10);//开始点
    c.lineTo(40,40);//让开始点连到这个点
    c.lineTo(60,45);//让开始点连到这个点
    c.closePath();//将这些点用线连接起来    
    c.lineWidth="2";        

    // c.moveTo(40,20);
    // c.lineTo(40,60);
    // c.lineTo(65,60);
    // c.lineTo(65,90);
    // c.lineTo(40,90)
    // c.stroke();

    // c.moveTo(30,75);
    // c.lineTo(60,75);
     c.stroke();
     c.fillStyle="blue";//设置填充之前的画的图形的颜色
     c.fill();//进行填充

 结果为:

第六丶

 

posted @ 2017-08-08 17:59  丰study  阅读(190)  评论(0)    收藏  举报