今天的目标
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圆)