h5 canvas的使用时间：2022-08-20    作者：panda    访问：1073

h5 canvas基本使用流程

    一、创建画布

var canvas = docmennt.getElmentById('canvas');

    二、获取画笔

var pen = canvas.getContext('2d');

    三、设置画笔大小

pen.lineWidth = '10px';

    四、设置画笔颜色

        1、线条颜色

pen.strokeStyle = 'red';

        2、填充颜色

pen.fillStyle = 'red';

 五、开始绘画

        1、画圆

pen.arc(100,75,50,0,2*Math.PI);

        2、画矩形

pen.rect(20,20,150,100);

        3、画线段

pen.beginPath();
pen.moveTo(10,10);
pen.lineTo(100,100);

        4、画曲线

pen.beginPath();
pen.moveTo(10,10);
pen.quadraticCurveTo(20,100,200,20);//创建二次贝塞尔曲线。
pen.bezierCurveTo(20,100,200,100,200,20);//创建三次贝塞尔曲线。

       5、画布上写字

pen.font="30px Verdana";
pen.fillText("Big smile!",10,90);//实心
pen.strokeText("Big smile!",10,90);//空心字

       6、绘制图片视频

var img=document.getElementById("scream");
img.onload = function(){
    pen.drawImage(img,10,10);
}

 六、置于画布

        1、边缘绘制

pen.stroke();

        2、内部填充

pen.fill();