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