canvas 是HTML5中新增的一个标签（video），绘制操作通过Javascript完成。
Svg 矢量图符合xml标签节点
1、获取画布
var canvas = document.querySelector("#canvas");
2、获取绘画环境，参数必须传入2d
var ctx = canvas.getContext("2d");
moveTo(x,y)设置绘制线段起点（用于表示开始一条新线的位置）
lineTo(x,y)绘制线段到指定点，如果是第一条线可以不使用moveTo ,而直接LineTo，否则建议一律使用moveTo
stroke()描边（绘制）
lineWidth设置线宽 ctx.lineWidth = 10;
strokeStyle 设置描边样式 接收所有颜色类型 red #eee rgb rgba(188,188,188,.5) HSL
lineJoin设置线段交汇处样式 接收 bevel斜角 round圆角 miter尖角 默认
lineCap设置线帽（只在端点处有效） butt无，默认。round圆帽 square方帽
closePath闭合路径 将当前正在绘制的路径闭合
fill() 填充(如果没有分隔开，会产生闭合)
fillStyle设置填充样式 同strokeStyle
beginPath()开始一条新路径的绘制 与closePath 没有一点关系
rect
fillRect(x,y,w,h) 填充矩形
strokeRect 描边矩形
绘制正方形的三种方法
1、ctx.beginPath();
ctx.fillStyle = "#ccc"
ctx.fillRect(x,y,w,h)
2、ctx.beginPath();
ctx.fillStyle = "#ccc"
ctx.strokeRect(x,y,w.h)
3、ctx.beginPath();
ctx.rect(x,y.w.h);
ctx.fill();
动画效果制作（刮奖）
游戏界面每次都会清掉整块画布，然后绘制下一帧动作
clearRect(0,0,canvas.width,canvas.height)
clearRect(x,y,w,h) 擦除 指定的区域
rect(x,y,w,h) 定义矩形路径
绘制圆
通过绘制圆弧来画圆
arc(cx,cy,radius,startRadian ,endRadian[,是否逆时针]) 绘制圆弧
cx | cy 圆心坐标
radius 半径
startRadian | endRadian 开始 | 结束 弧度
例ctx.arc(250,250,100,0,Math.PI/2,true)
Math.PI/180 * 60 画一个六十度的弧
文字
fillText(string,x,y)填充文字
strokeText(string,x,y) 描边文字
文字属性
font设置字体样式
textAlign设置文字水平对齐方式
textBaseline设置文字垂直对齐方式
![Uploading 图片_690680.png . . .]
数据可视化开发:饼图
绘制图片
要求图片必须在加载完成之后
var img = new Image();
img.src = "./girl.png";
//图片下载完毕
img.onload = function(){
console.log("success");
ctx.drawImage(this,100,0);
}
drawImage(img,x,y) 图片有多大就绘多大，超出画布大小不会制
drawImage(img,x,y,iw,ih) 将图片绘制到指定大小内，会压缩或拉伸图片
drawImage(img,ix,iy,iw,ih,cx,cy,cw.ch) 由前四个参数决定从原图上指定位置剪下指定大小的图；绘制到指定位置的画布上的指定大小，会压缩或拉伸图片
像素
getImageData(x,y,w,h)获取指定范围内的像素信息
putImageData(imgData,x,y)向指定范围内绘制像素信息
img.onload = function(){
console.log("success");
ctx.drawImage(this,0,0);
// ctx.drawImage(this,0,0,200,200)
// ctx.drawImage(this,150,100,50,50,400,250,50,50)
var data = ctx.getImageData(0,0,500,500);
var arr = data.data;
for(var i = 0 ; i< arr.length;i+=4){
//取反色？
// arr[i] = 255-arr[i];
// arr[i+1] = 255-arr[i+1];
// arr[i+2] = 255-arr[i+2];
//灰度
arr[i] = arr[i+1] = arr[i+2] = (arr[i]+arr[i+1]+arr[i+2])/3
}
ctx.putImageData(data,0,0);
}
video
<video src="./aaa.mp4" autoplay width=600></video>
var video = document.querySelector("video")
video.oncanplaythrough = function(){
//代表视频能够无缓冲播放
function _run(){
ctx.drawImage(video,0,0);
requestAnimationFrame(_run);
}
_run();
}
更改视频颜色
var canvas = document.querySelector("#canvas");
//获取绘画环境，参数必须传入2d
var ctx = canvas.getContext("2d");
var video = document.querySelector("video")
video.oncanplaythrough = function () {
//代表视频能够无缓冲播放
function _run() {
ctx.drawImage(video, 0, 0);
var data = ctx.getImageData(0, 0, 500, 500);
var arr = data.data;
for (var i = 0; i < arr.length; i += 4) {
//反转
arr[i] = 255-arr[i];
arr[i+1] = 255-arr[i+1];
arr[i+2] = 255-arr[i+2];
//灰度
// arr[i] = arr[i + 1] = arr[i + 2] = (arr[i] + arr[i + 1] + arr[i + 2]) / 3
}
ctx.putImageData(data, 0, 0);
requestAnimationFrame(_run);
}
_run();
}
pattern样品
createPattern(img,repeatType)创建平铺对象
repeatType平铺类型 repeat-x repeat-y repeat no-repeat
var img = new Image();
img.src = "./1.jpg";
img.onload = function () {
var pattern = ctx.createPattern(this, "repeat");
ctx.fillStyle = pattern;
ctx.fillRect(0,0,200,200);
ctx.arc(250,250,100,0,Math.PI*2)
ctx.fill()
}
clip()裁剪
1、必须有一条封闭的路径
2、路径必须在clip之前创建
3、clip必须在drawImage之前调用
var img = new Image();
img.src = "./girl.png";
//图片下载完毕
img.onload = function(){
// console.log("success");
ctx.arc(200,150,50,0,Math.PI*2);
ctx.clip();
ctx.drawImage(this,0,0);
}
组合
source-over 默认，新图形在上
destination-over
source-in
destination-in
source-out
destination-out
source-atop
destination-atop
lighter
xor
copy
source新图形 destination旧图形
in 交集，out非交集，over代表覆盖 atop重叠部分在上 xor扣掉重合部分 copy 新图形
ctx.fillStyle= "blue";
ctx.fillRect(100,100,150,150);
ctx.globalCompositeOperation = "copy";
ctx.beginPath();
ctx.arc(250,250,100,0,Math.PI*2)
ctx.fillStyle= "green";
ctx.fill()
坐标轴
save
restore
rotate
translate
阴影
ctx.shadowColor = "blue"; 阴影颜色
ctx.shadowOffsetX = 50; 水平偏移距离（可负值）
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10; 模糊距离
ctx.fillRect(200,200,100,50);
ctx.font = "bold 50px 黑体";
ctx.fillText("Hello Canvas",50,300);
贝塞尔
ctx.moveTo(100, 150)
ctx.lineTo(300, 50);
ctx.lineTo(450, 150);
ctx.stroke();
ctx.moveTo(100, 400)
ctx.lineTo(150, 300)
ctx.lineTo(350, 250);
ctx.lineTo(450, 400);
ctx.stroke();
ctx.moveTo(100, 150)
ctx.quadraticCurveTo(300, 50, 450, 150)
ctx.stroke()
ctx.moveTo(100, 400)
ctx.bezierCurveTo(150, 300, 350, 250, 450, 400)
ctx.stroke()
渐变
线性渐变（4个参数）
var lg = ctx.createLinearGradient(0,0,500,500);
径向渐变（6个参数）
var rg = ctx.createRadialGradient(100,250,50,350,250,150);
rg.addColorStop(0,"red");
rg.addColorStop(0.5,"yellow");
rg.addColorStop(1,"blue");
ctx.fillStyle = rg;
ctx.fillRect(0,0,500,500);
