Canvas教程一：基本使用及样式创建

canvas 教程

绘图

1. 创建画布

• getContext(): 获得渲染上下文及绘画

var canvas = document.getElementById('canvas');
if(canvas.getContext){
// 浏览器支持canvas
    var ctx = canvas.getContext('2d');
}eles{
    // 不支持
}

2. 绘制矩形

• fillRect(x,y,width,height) : 绘制一个填充的矩形
• strokeRect(x,y,width,height) : 绘制一个矩形的边框
• clearRect(x,y,width,height): 清除指定矩形区域，让清除部分完全透明

ctx.fillStyle="rgba(200,0,0)"
ctx.fillRect(0,0,55,50)

ctx.clearRect(10,10,20,20)
ctx.strokeStyle="rgba(0,0,200)"
ctx.strokeRect(30,30,20,20)

3. 绘制路径

1. beginPath(): 创建路径起始点 —— 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
2. stroke: 使用画图命令画出路径,通过线条来绘制图形轮廓。
3. closePath(): 把路径封闭,闭合路径之后图形绘制命令又重新指向到上下文中。
4. fill():通过描边或填充路径区域来渲染图形, 通过填充路径的内容区域生成实心的图形。

4. 绘制圆弧

• arc(x, y, radius, startAngle, endAngle, anticlockwise) : 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
• 注意：注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式: 弧度=(Math.PI/180)*角度。

5. 绘制直线

• lineTo(x,y) : 绘制一条从当前位置到指定x以及y位置的直线。

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
  var ctx = canvas.getContext('2d');

  // 填充三角形
  ctx.beginPath();
  ctx.moveTo(25, 25);
  ctx.lineTo(105, 25);
  ctx.lineTo(25, 105);
  ctx.fill();

  // 描边三角形
  ctx.beginPath();
  ctx.moveTo(125, 125);
  ctx.lineTo(125, 45);
  ctx.lineTo(45, 125);
  ctx.closePath();  // 注意使用stroke前，请先closePath
  ctx.stroke();
  }
}

添加样式及颜色

颜色Color

• fillStyle = color : 设置图形的填充颜色
• strokeStyle= color : 设置图形轮廓的颜色
• color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。

注意: 一旦您设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。

// 这些 fillStyle 的值均为 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";
// 绘制调色盘
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i=0;i<6;i++){
    for (var j=0;j<6;j++){
      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + 
                       Math.floor(255-42.5*j) + ',0)';
      ctx.fillRect(j*25,i*25,25,25);
    }
  }
}

图形透明度globalAlpha

• ctx.globalAlpha=number

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  // 画背景
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0,0,75,75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75,0,75,75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0,75,75,75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75,75,75,75);
  ctx.fillStyle = '#FFF';

  // 设置透明度值—— 这之后的图形表明度为0.2，不影响前面绘制的矩形
  ctx.globalAlpha = 0.2;

  // 画半透明圆
  for (var i=0;i<7;i++){
      ctx.beginPath();
      ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
      ctx.fill();
  }
}

线型LineStyle

• 设置线宽： lineWidth = value : 设置线条宽度 。（下图是宽为1的线条，如何设置更清晰）
  

• lineCap = type : 设置线条末端样式【butt: 默认值， round: 圆角，square:在端点外额外加高度为一半线宽的方块】（如图：三种类型值的效果）
  

• lineJoin = type : 设定线条与线条间接合处的样式。【round, bevel,mitter(默认值)】——如下图四段线条的连接处分别为round,bevel, miter的效果
  

• miterLimit = value : 限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。

• 设置虚线：

  • getLineDash() ：返回一个包含当前虚线样式，长度为非负偶数的数组。
  • setLineDash(segments)：设置当前虚线样式，segments为数组，用于指定线段与间隙的交替
  • lineDashOffset = value ： 设置虚线样式的起始偏移量。

ctx.setLineDash([4,4])
ctx.lineDashOffset=-0
ctx.beginPath()
ctx.lineTo(0,0)
ctx.lineTo(100,100)
ctx.closePath()
ctx.strokeStyle='#f00'
ctx.stroke()

渐变Gradients

• 创建渐变对象：
  • createLinearGradient(x1, y1, x2, y2)： 线性渐变，4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
  • createRadialGradient(x1, y1, r1, x2, y2, r2)：径向渐变，6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。
• 为渐变对象上色：
  • gradient.addColorStop(position, color)：position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）。

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  // Create gradients
  var lingrad = ctx.createLinearGradient(0,0,0,150);
  lingrad.addColorStop(0, '#00ABEB');
  lingrad.addColorStop(0.5, '#fff');
  lingrad.addColorStop(0.5, '#26C000');
  lingrad.addColorStop(1, '#fff');

  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
  lingrad2.addColorStop(0.5, '#000');
  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');

  // assign gradients to fill and stroke styles
  ctx.fillStyle = lingrad;
  ctx.strokeStyle = lingrad2;
  
  // draw shapes
  ctx.fillRect(10,10,130,130);
  ctx.strokeRect(50,50,50,50);

}

阴影 Shadows

• shadowOffsetX = float： shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
• shadowOffsetY = float：shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
• shadowBlur = float：shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
• shadowColor = color：shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

// 文字阴影样式
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  ctx.shadowBlur = 2;
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
 
  ctx.font = "20px Times New Roman";
  ctx.fillStyle = "Black";
  ctx.fillText("Sample String", 5, 30);
}

注意事项及踩坑记录：

canvas绘制的矩形画面模糊不清？

• 如果用css来定义宽高，画面容易变形，所以建议通过width,height属性来设置

绘制宽1的线条，边界模糊

• 如果线条的起始是从整数（如：3,1 —> 3,5)坐标开始的，则1宽度的线，中点为起始,延伸到两边直到1px，所以会模糊。
• 解决办法：从(3.5,1 —> 3.5,5)