canvas

简介

在js中进行图片的绘制

往往用于全屏类的动画和小游戏的制作和图标的绘制

基本语法

<canvas width="400" height="500" id="canvas"></canvas>

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

canvas和其他dom元素一样都拥有自己的方法

canvas常用方法

ctx.beginPath()：设置起始路径

ctx.closePath()：自动闭合开始点和终点

ctx.fillStyle = color：设置填充样式

ctx.strokeStyle = color：设置描边样式

ctx.fillStyle()：声明填充

ctx.strokeStyle：声明描边

ctx.lineWidth = number：描边宽度

ctx.rect(x,yx,w,h)： 绘制矩形

x，y：起始点坐标

w：设定的宽度

h：设定的高度

ctx.clearRect(x,y,w,h)：清除矩形

ctx.arc(x,y,r,start_point,end_point,countWise)： 绘制圆形

x,y：圆心坐标

r：圆心的半径

start_point：起始点（0-2*math.PI）

end_point：终止点（0-2*math.PI）

countWise：绘制方向|true、flase

绘制线段

moveTo(x,y)：设定要开始线段的坐标

lineTo(x,y)：目标线段坐标

arcTo(x1,y1,x2,y2,r)： 绘制弧度

x1,y1：控制点坐标

x2,y2：结束点坐标

r：绘制弧度的半径

ctx.quadraticCurveTo(x1,y1,x2,y2)： 绘制二次贝塞尔曲线

x1,y1：控制点坐标

x2,y2：结束点坐标

ctx.bezierCurveTo(x1,y1,x2,y2,x3,y3)： 绘制三次贝塞尔曲线

x1,y1：控制点坐标

x2,y2：结束点坐标

x3,y3：结束点坐标

关于css3中的贝塞尔曲线

贝塞尔曲线是指过渡效果

ctx.createLinearGradient(x1,y1,x2,y2)： canvas线性渐变

x1,y1：起点坐标

x1,y1：起点坐标

lg.addColorStop(p,color)：0-1设置颜色

可以设置填充，描边：

var lg = ctx.cteateLinearGradient(x1,y1,x2,y2)

fillStyle = lg

ctx.createRadialGradient(x1,y1,r1,x2,y2,r2)： 设置径向渐变

x1,y1,r1：內圆圆心的坐标和半径

x2,y2,r2：外圆圆心的坐标和半径

图形转换

ctx.translate(x,y)：平移

x,y：平移的坐标

ctx.rotate(darg)：旋转

darg：弧长 arg*Math.PI/180

ctx.scale(w,h)：放大

w：宽度方向上倍数 h：高度方向上倍数

绘制阴影

shadowOffsetX：水平平移距离

shadowOffsetY：垂直平移距离

shadowBlur：模糊大小

shadowColor：阴影颜色

绘制文本属性

ctx.font = "style size family"：设置文本样式

ctx.textBaseline = "top|midde|bottom"：设置文本基线

ctx.textAlign = "left|center|right"：设置水平对齐方式

ctx.fillText = "text,x,y"：设置实心字体

text：文字信息

x,y：文字位置

ctx.strokeText = "text,x,y"：设置空心字体

text：文字信息

x,y：文字位置

绘制图片

drawImage(img,sx,sy,sw,sh,x,y,w,h)

sx,sy：裁剪坐标

sw,sh：裁剪高度

x,y：canvas中的坐标

w,h：对象高度

代码： var img = new Image();

img.src = "img/html.png";

img.onload = function(){

ctx.drawImage(img,0,0,399,302,0,0,800,800);

}

图像组合

globalCompositeOperation：设置图像组合

course-over：新图像在原图像之上

destination-over：原图上在新图像之上

source-in：取部分交集显示新图像

destination-in：去交集部分显示原图像

sourse-atop：显示原图和交集部分 交集部分显示新图像

destination-atop：显示新图像和交集部分 交集部分显示原图像

sourse-out：显示新图像非交集部分

destination-out：显示原图像非交集部分

lighter：都显示，重叠部分颜色叠加

xor：费交集部分显示

copy：只显示新图像

存入和读取

ctx.save()：存入

ctx.restore()：读取