1.canvas代码提示
js头部添加：/** @type {HTMLCanvasElement} */
2.初始化画布
var canvas=document.getElementById('main')
canvas.width=document.documentElement.clientWidth; //设置画布宽
canvas.height=document.documentElement.clientHeight; //设置画布高
3.设置绘图环境
var ctx=canvas.getContext('2d');
4.设置画笔
ctx.fillStyle="#f00"
5.画矩形
ctx.fillRect(100,100,200,200) // (x,y,width,height)
6.画画
ctx.beginPath(); //开始一条路径，或重置当前的路径
ctx.moveTo(100,300) // 把窗口的左上角移动到一个指定的坐标
ctx.lineTo(300,600) // 添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条)
ctx.lineTo(200,100)
ctx.lineWidth=5 // 属性设置或返回当前线条的宽度，以像素计
ctx.strokeStyle="#f433" // 设置或返回用于笔触的颜色、渐变或模式
ctx.closePath() // 创建从当前点到开始点的路径
ctx.fillStyle="blue"
ctx.stroke() //实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
ctx.fill() // 填充当前的图像（路径）。默认颜色是黑色。
7.调色板
for (var i = 0;i < 10;i++){
for (var j = 0;j < 10;j++){
ctx.fillStyle = 'rgba('+ Math.floor(255-30 * i) +','+ Math.floor(255-30 * j) +', 100)';
ctx.fillRect(i * 10, j * 10, 10, 10);
}
}
8.图片
var image=new Image();
image.src="http://yun.duiba.com.cn/spark/assets/c83f253cf9f23cf240847038a01af550261220d5.jpeg"
image.onload=function(){
ctx.drawImage(image,100,100,100,100) （图片,宽，高，x，y）
} 或
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
9.文本
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
eg:
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
10.渐变
//(渐变开始点的 x 坐标,渐变开始点的 y 坐标,渐变结束点的 x 坐标,渐变结束点的 x 坐标)
createLinearGradient(x,y,x1,y1) - 创建线条渐变
// (x渐变的开始圆的 x 坐标,y渐变的开始圆的 y 坐标,r开始圆的半径,x1渐变的结束圆的 x 坐标,y1渐变的束圆的 y 坐标,r1结束圆的半径)
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
11. 平铺图片
var canvas=document.querySelector('canvas');
var ctx=canvas.getContext('2d');
var image=new Image();
image.src="http://yun.duiba.com.cn/spark/assets/c83f253cf9f23cf240847038a01af550261220d5.jpeg"
image.onload=function(){
for(var i=0;i<6;i++){
for(var j=0;j<3;j++){
ctx.drawImage(image,80*j,80*i,50,50)
}
}
}
12. 切片
var ctx=document.querySelector('canvas').getContext('2d')
var image=new Image();
image.src="http://yun.duiba.com.cn/spark/assets/c83f253cf9f23cf240847038a01af550261220d5.jpeg"
image.onload=function(){
/*
img规定要使用的图像、画布或视频。
sx可选。开始剪切的 x 坐标位置。
sy可选。开始剪切的 y 坐标位置。
swidth可选。被剪切图像的宽度。
sheight可选。被剪切图像的高度。
x在画布上放置图像的 x 坐标位置。
y在画布上放置图像的 y 坐标位置。
width可选。要使用的图像的宽度。（伸展或缩小图像）
height可选。要使用的图像的高度。（伸展或缩小图像）
**/
// ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
ctx.drawImage(image,50,50,800,800,50,50,100,100)
}