H5新特性-canvas绘图--渐变对象路径(最复杂)--图片--变形操作

今天的目标

  3.1:canvas绘图--(重点掌握:渐变对象.路径.图片.变形)

  3.2:canvas绘图--渐变对象

   线性渐变: linearGradient

   径向渐变:

   var g = ctx.createLinearGradient(x1,y1,x2,y2);

   g.addStopColor(offset,color);

   ..

   ctx.fillStyle = g;

   ctx.strokeStyle = g;

  

  3.3:canvas绘图--路径(最复杂)

  Path:由多个坐标点组成任意形状,路径不见,可用于

       "描边","填充","裁剪"...

   ctx.beginPath();     开始一条新路径

   ctx.closePath();     闭合当前路径

   ctx.moveTo(x,y);    移动指定点

   ctx.lineTo(x,y);      从当前点到指定点画直线

   ctx.arc(cx,cy,r,start,end); 绘制圆拱形

   cx cy 圆心

   r    半径

   start 开始角度   (弧度0~2*PI)

   end  结束角度   角度*Math.PI/180==弧度

   ctx.stroke();       描边

   ctx.fill();          填充

   练习:使用描边绘制一个坐标轴

   练习:使用圆拱形绘制可以前进的圆环进度条

   

   练习:创建一个函数openMouth()/closeMouth();

        创建定义时器，每隔1s交替调用

        openMouth()/closeMouth();

   

  3.4: canvas绘图--图片

   canvas属于客户端技术，图片在服务器中，所以浏览器必须先下载要绘制的图片，且等待图片异步加载完成.

   var p3 = new Image();      创建图片对象

   p3.src = "x.jpg";          下载指定图片

   p3.onload = function(){     图片下载完成触发事件

         console.log(p3.width);

         ctx.drawImage(p3,x,y);    原始大小绘图

         ctx.drawImage(p3,x,y,w,h); 拉伸绘图

   }

   

   练习:在画布四个角各画一架飞机

   练习:在画布左上角画一个左右移动飞机

   

canvas绘图核心知识点--重占

绘制矩形:

ctx.fillRect();ctx.strokeRect();ctx.clearRect();

绘制文本

ctx.fillText();ctx.strokeText();ctx.measureText().width

绘制路径

ctx.beginPath();ctx.closePath();

ctx.moveTo();ctx.lineTo();

ctx.arc();ctx.stroke();ctx.fill()

绘制图像

ctx.drawImage();

  3.4: canvas绘图--变形操作 

   canvas绘图可以针对于某一个图像/图形，的绘制过程

   进行变形 rotate,translate

   ctx.rotate(弧度);      旋转画笔，轴点画布的原点.

   ctx.translate(x,y);     平移原点

   ctx.save();           保存画笔状态(存盘)

   ctx.restore();        恢复画笔状态到上一次保存(读取存盘)

  练习:在画布左上角画一个绕自己为中心旋转飞机1

  练习:在画布右上角画一个绕自己为中心旋转飞机2

       飞机2旋转速度是飞机1 2倍svg绘图

  练习:使用canvas绘制随机改变验证码图片!

  

  var str = "ABC..abcdefghim...1234567890";

  var char = str[字符串长度随机数] 17:45~17:57

  要求:

  画布背景随机颜色[浅色],ctx.fillRect();

  文字内容随机，大小随机，颜色随机(深色),旋转角度随机

  5条随机干扰线(深色), 贝赛尔曲线

  100个干扰点(半径为1圆)