基本用法
1、要使用canvas，必需先设置其width和height属性，指定绘图的大小，中间内容是后备信息，不支持的浏览器才显示
<canvas id='drawing' width='200' height='200'> a drawing of something </canvas>
2、要在这块画布上绘图，需要取得绘图上下文，而取得绘图上下文的调用，需要调用getContext()方法，传入2d
var drawing = document.getElementById('drawing); //确定浏览器支持<canvas>元素 if(drawing.getContext){ var context = drawing.getContext('2d'); //do sth }
3、使用toDataURL()方法，可以导出再<canvas>元素上绘制的图像，比如：要取得画布中的一幅png格式的图像
var drawing = document.getElementById('drawing); //确定浏览器支持<canvas>元素 if(drawing.getContext){ //取得图像的数据URI var imgURI = drawing.toDataURL('image/png'); //显示图像 var image = document.createElement('img'); image.src = imgURI; document.body.appendChild(image); }
2D上下文
填充和描边
填充：fillStyle属性，用指定的样式(颜色，渐变，图像)填充图形
描边：strokeStyle属性，只在图形的边缘画线
var drawing = document.getElementById('drawing'); //确定浏览器支持<canvas>元素 if(drawing.getContext){ var context = drawing.getContext('2D'); context.strokeStyle = '#0000ff'; context.fillStyle = 'red'; }
他们指定表示颜色的字符串值，可以使用css中指定颜色值的任何格式，包括颜色名，十六进制，rgb , rgba , hsl , hsla。
绘制矩形
矩形是唯一一种可以直接再2d上下文绘制的形状。与矩形有关的方法fillRect(),strokeRect(), clearRect()。
这三个方法接收4个参数，矩形的x坐标，矩形的y坐标，矩形宽度和矩形高度
fillRect():在画布绘制的矩形会填充指定的颜色
strokeRect():在画布上绘制的矩形会使用指定的颜色描边
clearRect():清除画布上的矩形区域
var drawing = document.getElementById('drawing'); //确定浏览器支持<canvas>元素 if(drawing.getContext){ var context = drawing.getContext("2d"); //绘制红色矩形 context.fillStyle = "#ff0000"; context.fillRect(10, 10, 50, 50); context.strokeStyle = "#0000ff"; context.strokeRect(10,10,50,50); //绘制半透明的蓝色矩形 context.fillStyle = "rgba(0, 0, 255, 0.5)"; context.fillRect(30, 30, 50, 50); context.strokeStyle = "#ff0000"; context.strokeRect(30,30,50,50); //在两个矩形重叠的地方消除一个小矩形 context.clearRect(30, 30, 30, 30); }
绘制一个不带数字的时钟表盘
要绘制路径，首先必须调用beginPath()方法，表示要开始绘制新路径
arc(x, y, radius, startAngle, endAngle, counterclockwise):以(x,y)为圆心绘制一条弧线，弧线半径为radius,
起始和结束角度（用弧度表示）分别为startAngle和endAngle。最后一个参数表示startAngle和endAngle是否按逆时针方向计算，
值为false表示按顺时针方向计算
moveTo(x, y):将绘图游标移动到(x,y)，不画线
lineTo(x,y):从上一点开始绘制一条线，到(x,y)为止
var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 if(drawing.getContext){ var context = drawing.getContext("2d"); //开始路径 context.beginPath(); //绘制外圆 context.arc(100, 100, 99, 0, 2 * Math.PI, false); //PI在数学方法中为π,而此时的π在角度里为180°,Math.PI/180就为1° //绘制内圆 context.moveTo(194, 100); context.arc(100, 100, 94, 0, 2 * Math.PI, false); //绘制分针 context.moveTo(100, 100); context.lineTo(100, 15); //绘制时针 context.moveTo(100, 100); context.lineTo(35, 100); //描边路径 context.stroke(); }
绘制文本
font:表示文本样式，大小及字体。
textAlign:表示文本对齐方式。注意左右用'start'和'end'。可能的值有'start','end','left','right','center'
textBaseline:表示文本的基线。 可能的值有'top','middle','bottom','hanging','alphabetic','ideogrphic'
context.font = "bold 14px Arial"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillText("12", 100, 20);
如果需要把文本控制在某一区域中的时候，2d上下文提供了辅助确定文本大小的方法measureText()。这个方法接收一个参数，既要绘制的文本。
返回的对象目前只有一个width属性，但将来还会增加更多度量属性
var fontSize = 100; context.font = fontSize + 'px Arial'; while(context.measureText('Hello word').width > 100){ fontSize--; context.font = fontSize + 'px Arial'; } context.fillText('Hello word', 170, 150); context.fillText('Font size is ' + fontSize + 'px', 210, 120);
绘制变换
translate(x,y)：将坐标原点移动到(x,y)。执行这个变换后，坐标(0,0)会变成之前的(x,y)表示的点。
context.translate(100,100)
rotate(angle):围绕原点旋转图像angle弧度
context.rotate(1); //以弧度为单位，360°角=2π弧度，1弧度=57.3°角，1°角=π/180弧度
绘制图像
如果想要把一幅图像绘制到画布上，可以使用drawImage()方法。调用这个方法时，有三种不同的参数组合
1）drawImage(image, 10, 10):表示绘制的源图像起点的坐标10,10，这里没有指定大小，所以与原始大小一样
2）drawImage(image, 10, 10, 50, 50):后面新增的两个参数表示图像大小是50＊50像素
3）drawImage(image, 10, 10, 50, 50, 100, 100, 20, 20):后面新增的四个参数表示目标图像的起点(100,100),目标图像的大小20*20像素
var image = new Image(); image.src='timg.jpeg'; image.onload = function(){ //需要图片装载完后才能使用此图片 context.drawImage(image, 0, 0, 200, 200); }
绘制阴影
2D上下文会根据以下几个属性的值，自动为形状或路径绘制出阴影
shadowColor: 用css颜色格式表示的阴影颜色，默认为黑色。
shadowOffsetX: 形状或路径x轴方向的阴影偏移量，默认为0
shadowOffsetY: 形状或路径y轴方向的阴影偏移量，默认为0
shaodowBlur: 模糊的像素数，默认为0, 即不模糊。
//绘制阴影 context.shadowColor = 'rgba(0, 0, 0, 0.5)'; context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.shaodowBlur = 4;
绘制渐变
1)渐变
渐变由CanvasGradient实例表示，要创建一个新的线性渐变，可以调用createLinearGradient()方法，这个方法接收4个参数
起点的x坐标，起点的y坐标，终点的x坐标，终点的y坐标。调用后就会创建一个指定的渐变。
创建渐变后，就是使用addColorStop()方法来指定色标，这个方法接收两个参数：色标位置和CSS颜色值。色标位置是一个0（开始的颜色）
到1（结束到颜色）之间到数字
//绘制渐变 var gradient = context.createLinearGradient(30, 30, 70, 70); gradient.addColorStop(0, "white"); gradient.addColorStop(1, "black"); //绘制半透明的蓝色矩形 context.fillStyle = gradient; context.fillRect(30, 30, 50, 50);
为了覆盖整个矩形，矩形和渐变到坐标必须匹配才行
//绘制渐变 var gradient = context.createLinearGradient(30, 30, 70, 70); gradient.addColorStop(0, "white"); gradient.addColorStop(1, "black"); //绘制半透明的蓝色矩形 context.fillStyle = gradient; context.fillRect(50, 50, 50, 50);
这样只会显示部分渐变效果，只有左上角到一点白色，这是因为矩形的起点位于渐变的中间位置，而次渐变已经快结束了。
确保渐变的形状对齐非常重要，有时候可以考虑使用函数来确保坐标
function createRectLinearGradient(context, x, y, width, height){ return context.createLinearGradient(x, y, x+width, y+height); }
2)径向渐变（或放射渐变）
使用createRedialGradient()方法。这个方法接收6个参数，前三个参数是起点圆的坐标和半径，后三个参数是终点圆的原心坐标和半径
//绘制放射渐变 var gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30); gradient.addColorStop(0, "white"); gradient.addColorStop(1, "black"); //绘制渐变矩形 context.fillStyle = gradient; context.fillRect(30, 30, 50, 50);
因为创建比较麻烦，所以径向渐变并不那么容易控制，一般来说，让起点圆和终点圆保持为同心圆的情况比较多，这个时候只要考虑两个
圆多设置不同的半径就好了。
模式
模式就是重复的图像，要创建一个新模式，可以调用createPattern()方法并传入两个参数：一个html元素和一个表示重复
图像的字符串
var context = drawing.getContext("2d"); var image = new Image(); image.src='1.jpg'; image.onload = function(){ var pat = context.createPattern(image,"repeat"); context.fillStyle=pat; context.fillRect(0,0,500,500); }