基本语法
<canvas></canvas>- 使用 canvas 标签, 即可在页面中开辟一格区域. 可以设置其 width 和 height 设置该区域的尺寸.
- 默认 canvas 的宽高为 300 和 150.
- 使用 CSS 的方式设置宽高, 应该使用 HTML 属性.
基本绘图
基本绘图步骤：
1，获得canvas对象
2，调用getContext 方法，提供字符参数“2d”, 该方法返回 CanvasRenderingContext2D 类型的对象. 该对象提供基本的绘图命令.
3, 基本绘图命令
- 设置开始绘图的位置:
context.moveTo( x, y ). - 设置直线到的位置:
context.lineTo( x, y). - 描边绘制:
context.stroke(). - 填充绘制:
context.fill(). - 闭合路径:
context.closePath().
4，线型相关的属性
CanvasRenderingContext2D.lineWidth = number设置线宽.CanvasRenderingContext2D.lineCap= value 设置线末端类型.可取值为: 'butt'( 默认 ), 'round'（线头是圆的）, 'square'（线头两端各增加线宽的一半）
CanvasRenderingContext2D.lineJoin= value 设置相交线的拐点. 可以取值 'round'（圆头）, 'bevel'（斜面）, 'miter'(默认，两边相交为尖角)
CanvasRenderingContext2D.getLineDash()获取线段样式数组.（线条绘制规则,就是设置时括号里面的规则）CanvasRenderingContext2D.setLineDash()设置虚线样式，在（[实线大小，虚线大小]) 中设置，可设置多个值CanvasRenderingContext2D.lineDashOffset绘制虚线偏移量.CanvasRenderingContext2D.strokeStyle = value 设置描边样式CanvasRenderingContext2D.fillStyle = value 设置填充样式
例子：
<canvas id="mycanvas" width="500" height="400"></canvas> var canvas = document.getElementById("mycanvas");
canvas.style.border = '1px dashed red';
document.body.appendChild(canvas);
// 获得 CanvasRenderingContext2D 对象
var context = canvas.getContext('2d');
//设置起点
context.moveTo(0,0);
//绘制直线
context.lineTo( 500,400);
// 设置 起点
context.moveTo( 0, 400 );
// 绘制直线
context.lineTo( 500, 0 );
//设置描边色 颜色设置必须在stroke之前
context.strokeStyle = 'blue';
//显示描边效果
context.stroke();运行结果为
例子2：绘制矩形封装的方法
<canvas id="mycanvas" width="500" height="500"></canvas>
function JuXing(context,startX,startY,width,height,lineWidth,strokeStyle,fillStyle){
this.context = context;
this.startX = startX;
this.startY = startY;
this.width = width;
this.height = height;
this.lineWidth = lineWidth;
this.strokeStyle = strokeStyle;
this.fillStyle = fillStyle;
}
JuXing.prototype.draw =function(){
//放了防止重绘之前的路径，所以先把之前的路径清除掉
this.context.beginPath();
//开始位置
this.context.moveTo(this.startX,this.startY);
//绘制直线
this.context.lineTo(this.startX+this.width,this.startY);
this.context.lineTo(this.startX+this.width,this.startY+this.height);
this.context.lineTo(this.startX,this.startY+this.height);
this.context.closePath();
//设置线宽
this.context.lineWidth = this.lineWidth;
//设置线颜色
this.context.strokeStyle = this.strokeStyle;
//填充色
this.context.fillStyle =this.fillStyle;
this.context.stroke();
//填充
this.context.fill();
}
var jux= new JuXing( context,10,10,60,60,4,'deeppink','deeppink');
jux.draw();
运行结果为：
canvas绘制线条机制：
canvas 在绘制线条的时候会向左向右偏移线宽的一半，然后进行绘制。如果线宽为奇数，那么边缘的颜色值，会减一半。
绘制矩形：
context.strokeRect( x, y, width. height ) 绘制描边矩形
context.fillRect( x, y, width. height ) 绘制填充矩形
context.clearRect( x, y, width, height ) 清除矩形区域
注意: rect 方法就是矩形路径, 还需要使用 fill 或 stroke 才可以看到效果. 因此一般使用 strokeRect 或 fillRect直接可以看到结果.
绘制圆弧
语法: CanvasRenderingContext2D.arc( x, y, radius. startAngle. endAngle, anticlockwise )
描述:
- 该方法用于绘制一段弧, 配合开始点的位置 与
stroke方法或fill方法可以绘制扇形. - 方法中的前两个参数 x, y 表示绘制圆弧的圆心坐标.
- 参数 radius 表示圆弧半径, 单位为弧度.
- 参数 startAngle 与 endAngle 表示开始到结束的角度. 角度以水平向右为 0 弧度, 顺时针为正方向.
- 参数 anticlockwise 表示是否采用默认的正向角度, 如果传入 true 表示逆指针为正. 该参数可选.
注意：
- 使用 arc 绘图的时候, 如果没有设置
moveTo那么会从开始的绘弧的地方作为起始点. 如果设置了moveTo, 那么会连线该点与圆弧的起点. - 如果使用
stroke方法, 那么会从开始连线到圆弧的起始位置. 如果是fill方法, 会自动闭合路径填充.
绘制饼图封装的方法：
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext('2d');
//角度转弧度
function angleToRadian(angle){
return Math.PI /180*angle;
}
//画弧
context.arc(100,100,30,angleToRadian(0),angleToRadian(90));
context.stroke();
//画圆
context.beginPath();
context.arc(300,100,30,angleToRadian(90),angleToRadian(360));
context.stroke();
//画扇形
context.beginPath();
context.moveTo(100,300);
context.arc(100,300,90,angleToRadian(45),angleToRadian(180));
context.closePath();
context.stroke();
//混入式继承
function extend(o1,o2){
for(var key in o2){
if(o2.hasOwnProperty(key)){
o1[key] = o2[key];
}
}
}
//绘制饼图， x：圆心x轴坐标，y:圆心y轴坐标,r:半径，data：绘制饼图所需的数据
function Pipe(x,y,r,data){
this.x = x;
this.y = y;
this.r = r;
this.data = data;
// 一组颜色
this.colors = [ 'orange', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'peru', 'pink' ];
}
extend(Pipe.prototype,{
//绘制饼图
draw:function(){
var self =this;
//数据的总和
var num = 0;
this.data.forEach(function(val){
num+=val;
});
//一个数据值战鹰的角度
var bsaeAngle = 360 /num;
var startAngle = 0,
endAngle = 0;
//画扇形
this.data.forEach(function(val,i){
//每次进来，计算一下当前扇形的结束角度
endAngle = endAngle +bsaeAngle *val;
context.beginPath();
context.moveTo(self.x,self.y);
context.arc(self.x,self.y,self.r,angleToRadian(startAngle),angleToRadian(endAngle));
context.fillStyle = self.colors[i];
context.fill();
//下一个扇形的起始角度，是当前扇形的结束角度
startAngle = endAngle;
});
}
})
var pipe = new Pipe(200,200,80,[10,30,50,60,20])
pipe.draw();绘制文本：
语法:
CanvasRenderingContext2D.strokeText( text, x, y[, maxWidth] )CanvasRenderingContext2D.fillText( text, x, y[, maxWidth] )
描述:
- 这两个方法的功能都是在给定的 x, y 坐标下绘制文本内容.
- stroke 绘制描边文字, 文字内空心. fill 绘制填充文字, 即实心文字.
- 最后一个参数可选, 用于限制文字的总宽. 特殊条件下, 系统会自动调整文字宽度与大小以适应该参数限制.
设置文字字体
语法: CanvasRenderingContext2D.font = value
注意：font 不能单独设置字体大小，还得和其他属性配合使用
设置字体水平对齐方式
语法: CanvasRenderingContext2D.textAlign = value
设置字体垂直对齐方式
语法: CanvasRenderingContext2D.textBaseline = value
绘制图像：
语法：绘制图像虽然只有一个 drawImage 函数, 但是该函数有多重参数形式.
CanvasRenderingContext2D.drawImage( img, dx, dy ).CanvasRenderingContext2D.drawImage( img, dx（图像的x轴位置）, dy（图像的y轴位置）, dWidth（图像的宽）, dHeight（图像的高） ).CanvasRenderingContext2D.drawImage( img, sx（裁剪图像的x坐标）, sy（裁剪图像的y坐标）, sWidth（裁剪图像的宽）, sHeight（裁剪图像的高）, dx, dy, dWidth, dHeight ).
状态保存：
CanvasRenderingContext2D.save() 把当前的状态（绘制环境下的所有属性）copy一份保存下来。
状态回滚：
CanvasRenderingContext2D.restore()把最近保存的一次状态作为当前状态。
平移坐标轴：
CanvasRenderingContext2D.translate(x轴平移量，y轴平移量)
旋转坐标轴：
CanvasRenderingContext2D.rotate(旋转的度数)
缩放坐标轴：
CanvasRenderingContext2D.scale(x轴缩放的比值，y轴缩放的比值)
注意：已经绘制的图形不会受到影响，（平移、旋转、缩放）会在原来基础上累加
绘制旋转图形例子：
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
//绘制旋转图形步骤：
//先平移坐标轴到图形中心----旋转坐标轴---绘制图形
ctx.fillStyle ="pink";
ctx.fillRect(100,100,200,200);
ctx.translate(200,200)
ctx.rotate(Math.PI / 180 * 45 );
ctx.fillStyle = "blue";
ctx.fillRect(-25, -25, 50, 50 );