canvas绘图技术

canvas绘图是H5的新特性，可以用来绘制图表，图像。其性质是位图，不是矢量图。并且主要是通过JS绘图。

具体步骤如下：

　　(1)直接在HTML页面中写入canvas标签<canvas id="c1"width="500"height="400">该浏览器不支持canvas绘图技术</canvas>

　　　　注释：在canvas中直接指定属性值，来设定宽高，不能用样式来设定。其中中间文字，当浏览器不兼容canvas技术时就会出现这行文字。

　　（2）在JS页面中就行绘画操作

　　　　var ctx=c1.getContext("2d");//主要绘制2D的图，3d大部分不支持，并且运行效率低。

　　（3）有了画笔后开始绘图。很简单，在指定的canvas画布上开始绘图。

　　　　1、画矩形

　　　　　　ctx.strokeRect(x,y,w,h);//绘制矩形，并且描边（x,y指的是绘制原点，最初是在画板的左上角，即（0,0）点）

　　　　　　ctx.fillRect(x,y,w,h);//绘制矩形，并且填充

　　　　　　填充和描边都有自己的样式：ctx.strokeStyle="颜色";ctx.fillStyle="颜色";

　　　　2、画圆形

　　　　　　ctx.arc(x,y,r,deg1,deg2);//绘制圆形，坐标点x,y 半径r 起始度数deg1,终止度数deg2;初始位置原点在（0,0）

　　　　　　画完记得描边和填充

　　　　　　难点旋转：给圆做旋转时候要注意变换原点ctx.translate(x,y);ctx.rotate(deg)旋转的度数

　　　　　　用定时器控制旋转：

　　　　　　旋转速度可以先慢中间快后慢：抛物线函数y=a*x*x+b*x+c,根据不同点的对应值，计算出a,和b 的值

　　　　　　实例应用：圆盘抽奖，判断旋转度数，然后根据度数确定最终几等奖；

　　　　3、画图像

　　　　先创建图片

　　　　var img=new Image();

　　　　img.src="";//路径

　　　　img.οnlοad=function(){

　　　　　　ctx.drawImage(img,x,y,w,h);//x,y是坐标点，默认是在画布的左上角，w,h 是指定的宽高

　　　　}要等页面加载完成后才能进行绘制图片

　　　　如果有多张图片的时候要等所有图片都加载完成后才可以进行绘制图片；如何判断所有图片都已经加载完成呢？

　　　　在每张图片加载过程中放置一个进度变量：每个progress的值是根据每一张图片的大小估测一个值，最后只要能加到100就算完成。

　　　　　　var progress=0;

　　　　　img1.οnlοad=function(){

　　　　　　　　progress+=20;

　　　　　　　　if(progress>=100){

　　　　　　　　fun();

　　　　　　　　}

　　　　　　}

　　　　　　img2.οnlοad=function(){

　　　　　　progress+=40;

　　　　　　if(progress>=100){

　　　　　　　　fun();

　　　　　　}　　

　　　　　　}

　　　　　　img3.οnlοad=function(){

　　　　　　　progress+=40;

　　　　　　if(progress>=100){

　　　　　　fun();

　　　　　　}　　　　　

 

　　　　}

　　　　最后做判断：function fun(){

　　　　　　ctx.drawImage(img1,x,y,w,h);

　　　　　　....

　　　　　　开始绘制图片，可以写一个方法

　　　　　};

转载于:https://www.cnblogs.com/xiaozhuweb/p/5709427.html