html5新特性之画布

Posted 2020-07-09

1、canvas的理解

　　canvas是一个矩形区域，在这个区域内，通过js可以对区域内的每一帧像素控制

2、js操作canvas对象

　　canvas对象.getContext("2d");//获取画布内容

　　//设置渐变

　　var grd=cxt.createLinearGradient(0,0,175,50);

　　grd.addColorStop(0,"#FF0000")

　　grd.addColorStop(1,"#00FF00");

　　ctx.fillStyle　　　　　　　//设置填充色

　   ctx.fillRect　　              //设置填充位置和大小

　　ctx.lineWidth="5";　　  //绘制宽度

　　cxt.strokeStyle="red";  //绘制颜色

　　cxt.beginPath();　　      //开始绘制

 

　　//线条绘制

　　cxt.moveTo(10,10);　　//从哪里开始

　　cxt.lineTo(150,50);　　//到哪里

　　cxt.stroke();　　　　　 //绘制方式

　　//图片绘制

　　var img=new Image()

　　img.src="flower.png"

　　cxt.drawImage(img,0,0);

　　//圆形绘制

　　cxt.arc(70,18,15,0,Math.PI*2,true);

　　cxt.closePath();　　　  //绘制结束