canvas

1.绘制矩形

var canvas = document.getElementById(id);    // 获取画布id

var context = canvas.getContext('2d');       // getContext 获取图形上下文

context.fillStyle = '#EEEEFF';      // 设置填充样式

context.strokeStyle = 'yellow';     // 设置边框样式

context.fillRect(0,0,500,300);      // 绘制矩形

context.strokeRect = 'blue';        // 绘制矩形边框

2. 使用路径

context.beginPath();  // 绘制开始

context.closePath();  // 绘制结束

context.fill();       // 填充图形        ----- 当路径已经决定图形大小时，不需要在该方法上使用参数指定图形大小

context.stroke();     // 绘制图形边框    ----- 当路径已经决定图形大小时，不需要在该方法上使用参数指定图形大小

context.moveTo(20,20);  // 指定起点

context.lineTo(20,200);  // 指定终点

context.arc(i*25,i*25,i*10,0,Math.PI*2,true);   // 绘制圆形

context.lineCap = 'round';  // 直线添加线帽：butt （无）、round（圆）、square（方）

context.lineJoin = 'round';  // 两直线交汇时的拐角形状 miter（尖角）、round（圆角）、bevel（斜角）

context.setLineDash([5]);  // 设置虚线，数组长度任意，浏览器会循环执行

context.arcTo(150,100,50,20,30);  // 绘制曲线

context.bezierCurveTo(dx + x*s,dy + y*s - 100, dx + x*s + 100,dy + y*s, dx + x*s,dy + y*s);    // 贝塞尔曲线绘制

3. 使用path2D对象绘制路径

moveTo -- 光标移到指定坐标点   lineTo -- 绘制直线指定终点  rect -- 绘制矩形  arc -- 绘制圆形  ellipse -- 绘制椭圆

artTo -- 绘制曲线  bezierCurveTo -- 贝赛尔曲线  quadraticCurveTo -- 绘制二次样条曲线  closePath -- 关闭路径

4. 绘制渐变图形

// 绘制线性渐变
 var g1 = context.createLinearGradient(0,0,0,300);   // 前两个参数：开始渐变的坐标， 后两个参数：结束渐变的坐标

 g1.addColorStop(0,'rgba(255,255,0,0.5)');   // 线性渐变偏移量，及色值  偏移量正在0-1之间，addColorStop使用两次以上

 // 绘制径向渐变
 var g2 = context.createRadialGradient(400,0,0,400,0,400);  // 前3个参数： 开始圆心坐标及半径， 后3个参数： 结束圆心坐标及半径

 g2.addColorStop(0.1,'rgba(255,255,0,0.5)');

 g2.addColorStop(0.3,'rgba(0,255,255,0.7)'); 

 g2.addColorStop(1,'rgba(0,0,255,0.7)');

5. 图形绘制阴影

// 图形绘制阴影

 context.shadowOffsetX = 10;    // 阴影横向位移量

 context.shadowOffsetY = 10;    // 阴影纵向位移量

 context.shadowColor = 'rgba(100,100,100,0.5)';   // 阴影颜色

 context.shadowBlur = 7.5;   // 阴影模糊范围

6. 使用图形

// 使用图形
context.drawImage(image,i*n1,j*n2,n1,n2);  // 绘制图像，可以有3个参数（原始图像大小），5个参数（图像可缩放），9个参数（可以取图像的一部分）

context.createPattern(image,'repeat');     // 图像平铺

// createPattern(image,type)  image是路径 type有4个值：no-repeat  repeat-x  repeat-y repeat

context.clip();  // 实现canvas的裁剪功能 

context.getImageData(0,0,image5.width,image5.height);   // 获取图像中的像素

context.putImageData(imagedata, 0, 0);  // 反显图像重绘画布