python中canvas的用法_canvas用法总结

html：

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

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

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.οnlοad=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.οnlοad=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.οnlοad=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.οnlοad=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.οnlοad=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

// 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");

}