共计 4925 个字符，预计需要花费 13 分钟才能阅读完成。
html：
<canvas id=”canvas” width=”500px” height=”500px”></canvas>
Js：
var can = document.getElementById(“canvas”);
if(can.getContext){
var ctx=can.getContext(“2d”);
// 实心矩形(起点坐标, 宽和长)
ctx.fillStyle=”red”;
ctx.fillRect(300,300,50,50);
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
// 设置透明度
//ctx.globalAlpha=0.8;
// 创建路径, 描边圆形(圆心, 半径, 角度, 方向)
ctx.beginPath(); // 新建一个起点
ctx.arc(200,200,50,0,Math.PI*2,true);
ctx.stroke();
// 创建路径(三角形)
ctx.fillStyle=”rgba(0,0,200,0.5)”;
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(120,100);
ctx.lineTo(100,120);
ctx.fill();
// 二次贝塞尔(控制点, 结束点)
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.stroke();
// 三次贝塞尔(控制点 1,, 控制点 2, 结束点)
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.stroke();
//Path2D 保存路径
var bb=new Path2D();
bb.rect(70,70,30,30);
ctx.fill(bb);
var cc=new Path2D(bb);
ctx.fill(cc);
//SVG paths
var dd=new Path2D(“M10 10 H80 V80 H-80 Z”);
ctx.strokeStyle=”pink”;
ctx.stroke(dd);*/
//linewidth 设置线宽
for(var i=0; i<10; i++){
ctx.lineWidth=i+1;
ctx.beginPath();
ctx.moveTo(5 + i * 10, 5);
ctx.lineTo(5+i*10,150);
ctx.stroke();
}
//linecap 设置线条末端样式
var linecap=[“butt”,”round”,”square”];
ctx.strokeStyle=”green”;
for(var i=0;i<linecap.length;i++){
ctx.lineWidth=10;
ctx.lineCap=linecap[i];
ctx.beginPath();
ctx.moveTo(150+i*20,10);
ctx.lineTo(150+i*20,150);
ctx.stroke();
}
//lineJoin 设置线条接合处样式
var linejoin=[“round”,”bevel”,”miter”];
ctx.strokeStyle=”gold”;
for(var i=0;i<linecap.length;i++){
ctx.lineWidth=10;
ctx.lineJoin=linejoin[i];
ctx.beginPath();
ctx.moveTo(300,10+i*20);
ctx.lineTo(350,50+i*20);
ctx.lineTo(400,10+i*20);
ctx.lineTo(450,50+i*20);
ctx.lineTo(500,10+i*20);
ctx.stroke();
}
//miterLimit 设置相交最大长度
var miterlimit=[“round”,”bevel”,”miter”];
ctx.strokeStyle=”green”;
ctx.lineWidth=10;
ctx.miterLimit=1;
ctx.beginPath();
ctx.moveTo(300,100);
ctx.lineTo(350,150);
ctx.lineTo(400,100);
ctx.lineTo(450,150);
ctx.lineTo(500,100);
ctx.stroke();
//setLineDash lineDashOffset 设置虚线
var offset=0;
function draw(){
offset=offset+3;
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.setLineDash([4,6]); // 接收数组
ctx.lineDashOffset= -offset;
ctx.strokeRect(10,20,200,200);
if(offset>20){
offset=0;
}
}
setInterval(draw,200);
//linearGradient 线性渐变
var fff=ctx.createLinearGradient(100,100,50,150); // 渐变的起点和终点
fff.addColorStop(“0″,”black”);
fff.addColorStop(“1″,”red”);
ctx.fillStyle=fff;
ctx.fillRect(10,100,50,150);*/
//radialgradient/radgrad 径向渐变
/*var ggg=ctx.createRadialGradient(100,150,30,100,150,50); // 圆心, 半径 / 圆心, 半径
ggg.addColorStop(“0″,”black”);
ggg.addColorStop(“0.9″,”red”);
ggg.addColorStop(1,’rgba(1,159,98,0)’);
ctx.fillStyle=ggg;
ctx.fillRect(50,100,100,100);
// 创建新图案, 用图案填充
var img= new Image();
img.src=”images/4.png”; // 不可放在后面
img.onload=function(){
var ppr=ctx.createPattern(img,”no-repeat”);
ctx.fillStyle=ppr;
ctx.fillRect(300,200,50,50);
}
// 创建文本阴影效果
ctx.shadowOffsetX= 2;
ctx.shadowOffsetY= 2;
ctx.shadowBlur= 5;
ctx.shadowColor= “red”;
ctx.font=”20px ‘ 楷体 '”;
ctx.fillText(“ 哈哈 ”,100,50); // 填充字体(坐标)
// 填充规则
ctx.beginPath();
ctx.moveTo(250,200);
ctx.arc(200,200,50,0,Math.PI*2,true);
ctx.arc(200,200,30,0,Math.PI*2,true);
ctx.fill(“evenodd”); // 默认值 ’nonzero’
// 绘制文字(描边文字)
ctx.shadowOffsetX= 2;
ctx.shadowOffsetY= 2;
ctx.shadowBlur= 5;
ctx.shadowColor= “red”;
ctx.font=”50px ‘ 楷体 '”;
ctx.strokeText(“ 嘻嘻 ”,100,50);
// 基线校准
ctx.font=”50px serif”;
ctx.textAlign=”left”;
ctx.textBaseline=”top”;
ctx.strokeText(“hello”,100,50);
// 应用图像
var img= new Image();
img.src=”images/4.png”;
img.onload=function(){
ctx.drawImage(img,50,50);// 坐标
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(120,100);
ctx.lineTo(100,120);
ctx.fill();
}
// 缩放图像
var img= new Image();
img.src=”images/4.png”;
img.onload=function(){
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
ctx.drawImage(img,j*60,i*60,60,60); // 坐标, 图片的大小
}
}
}
// 切片
var img1= new Image();
img1.onload=function(){
// 所切图片的切片位置和大小, 目标显示位置和大小
ctx.drawImage(img1,250,250,200,200,0,0,100,100);
}
img1.src=”images/1.png”; // 可以放在后面, 可识别
var img2= new Image();
img2.src=”images/2.png”;
img2.onload=function(){
// 所切图片的切片位置和大小, 目标显示位置和大小
ctx.drawImage(img2,250,250,500,500,10,10,80,80);
}
// 保存 (属性) 与还原 save,restore 与栈相似
ctx.fillRect(0,0,150,150); // Draw a rectangle with default settings
ctx.save(); // Save the default state
ctx.fillStyle = ‘#09F’ // Make changes to the settings
ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings
ctx.save(); // Save the current state
ctx.fillStyle = ‘#FFF’ // Make changes to the settings
ctx.globalAlpha = 0.5;
ctx.fillRect(30,30,90,90); // Draw a rectangle with new settings
ctx.restore(); // Restore previous state
ctx.fillRect(45,45,60,60); // Draw a rectangle with restored settings
ctx.restore(); // Restore original state
ctx.fillRect(60,60,30,30);*/ // Draw a rectangle with restored settings
// 旋转 canvas 坐标 rotate/translate 移动 canvas 坐标原点
ctx.translate(100,100);
for (var i=1;i<6;i++){
// Loop through rings (from inside to out)
ctx.fillStyle = ‘rgb(‘+(51*i)+’,’+(255-51*i)+’,255)’;
for (var j=0;j<i*6;j++){
// draw individual dots
ctx.rotate(Math.PI*2/(i*6));
ctx.beginPath();
ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
ctx.fill();
}
}
} else {
console.log(“not support”);
}
