html:js:varcan=document.getElementById("canvas");if(can.getContext){varctx=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.填充();//二级贝塞尔曲线（控制点、终点）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保存路径varbb=newPath2D();bb.rect(70,70,30,30);ctx.fill(bb);varcc=newPath2D(bb);ctx.fill(cc);//SVG路径vardd=newPath2D("M1010H80V80H-80Z");ctx.strokeStyle="粉红色";ctx.stroke(dd);*///linewidth设置线宽for(vari=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设置线末端样式varlinecap=["butt","round","square"];ctx.strokeStyle="绿色";for(vari=0;i20）{偏移量=0；}}setInterval(draw,200);//linearGradient线性渐变varfff=ctx.createLinearGradient(100,100,50,150);//渐变的开始和结束fff.addColorStop("0","black");fff.addColorStop("1","re??d");ctx.fillStyle=fff;ctx.fillRect(10,100,50,150);*///radialgradient/radgrad径向渐变/*varggg=ctx.createRadialGradient(100,150,30,100,150,50);//center,radius/center,radiusggg.addColorStop("0","black");ggg.addColorStop("0.9","re??d");ggg.addColorStop(1,'rgba(1,159,98,0)');ctx.fillStyle=ggg;ctx.fillRect(50,100,100,100);//创建新图案，填充图案varimg=newImage();img.src="图片/4.png";//不能放在img.onload=function(){varppr=ctx.createPattern(img,"no-repeat");后面ctx.fillStyle=ppr;ctx.fillRect(300,200,50,50);}//创建文字阴影效果ctx.shadowOffsetX=2;ctx.shadowOffsetY=2;ctx.shadowBlur=5;CTX。阴影颜色=“红色”；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,数学.PI*2,真);ctx.fill("evenodd");//默认值'nonzero'//绘制文字（描边文字）ctx.shadowOffsetX=2;ctx.shadowOffsetY=2;CTX。阴影模糊=5;ctx.shadowColor="红色";ctx.font="50px'单体'";ctx.strokeText("嘻嘻",100,50);//基线校准ctx.font="50pxserif";ctx.textAlign="左";ctx.textBaseline="顶部";ctx.strokeText("你好",100,50);//应用图像varimg=newImage();img.src="图片/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.填充();}//缩放图像varimg=newImage();img.src="图片/4.png";img.onload=function(){for(vari=0;i<4;i++){for(varj=0;j<4;j++){ctx.drawImage(img,j*60,i*60,60,60);//坐标，图像大小}}}//切片varimg1=newImage();img1.onload=function(){//切图的切片位置和大小，目标显示位置和大小ctx.drawImage(img1,250,250,200,200,0,0,100,100);}img1.src="图片/1.png";//可以放在后面，可以识别varimg2=newImage();img2.src="图片/2.png";img2.onload=function(){//切图的切片位置和大小，目标显示位置和大小ctx.drawImage(img2,250,250,500,500,10,10,80,80);}//Save(attribute)和restoresave，restore类似于stack ctx.fillRect(0,0,150,150);//使用默认设置绘制一个矩形ctx.save();//保存默认状态 ctx.fillStyle='#09F'//更改设置 ctx.fillRect(15,15,120,120);//使用新设置绘制一个矩形 ctx.save();//保存当前状态 ctx.fillStyle='#FFF'//更改设置 ctx.globalAlpha=0.5; ctx.fillRect(30,30,90,90);//使用新设置绘制矩形 ctx.restore();//恢复之前的状态 ctx.fillRect(45,45,60,60);//绘制一个恢复设置的矩形 ctx.restore();//恢复原始状态 ctx.fillRect(60,60,30,30);*///绘制恢复设置的矩形//旋转canvas坐标rotate/translate移动canvas坐标原点 ctx.translate(100,100);for(vari=1;i<6;i++){//遍历环（从内到外） ctx.fillStyle='rgb('+(51*i)+','+(255-51*i)+',255)'; for(varj=0;j
