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.PI2,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+i10,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+i20,10); ctx.lineTo(150+i20,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+i20); ctx.lineTo(350,50+i20); ctx.lineTo(400,10+i20); ctx.lineTo(450,50+i20); ctx.lineTo(500,10+i20); 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.PI2,true); ctx.arc(200,200,30,0,Math.PI2,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,j60,i60,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(’+(51i)+’,’+(255-51i)+’,255)’; for (var j=0;j<i6;j++){ // draw individual dots ctx.rotate(Math.PI2/(i6)); ctx.beginPath(); ctx.arc(0,i12.5,5,0,Math.PI2,true); ctx.fill(); } }} else { console.log(“not support”);}
...