酒浓码浓 - canvas标签

canvas标签

canvas 画布

默认大小300*150

context是一个封装了很多绘图功能的对象 画笔

获取方法 var context = canvas.getContext("2d")

画布基本属性：

context.fill（）填充

context.stroke（）绘制边框

context.fillStyle 填充的样式

context.strokeStyle边框样式

context.lineWidth图形边框宽度

shadowColor阴影颜色 

shadowBlur阴影模糊级别

shadowOffsetX阴影与形状的水平距离

shadowOffsetY阴影与形状的垂直距离

 

绘制图形：

context.rect（x，y，width，height）

填充context.fillRect（x，y，width，height）

无填充strokeRect（x，y，width，height）

x：矩形起点横坐标（坐标原点为canvas左上角，原始远点）

y：纵

width：矩形长度

height：高

清除矩形区域：context.clearRect（x，y，width，height）

 

圆：

arcTo（）创建两切线之间的弧/曲线

ctx.arc（rx，ry，r，p1，p2，true）

rx，ry圆心坐标，半径，开始角度/弧度，结束... ，是否逆时针

180度  Math.PI

270度  Math.PI*3/2

0度 

90度  Math.PI/2

ctx.stroke（）

ctx.fill（）

系统会默认在绘制第一个路径的开始点为beginPath

如果画完前面的路径没有重新制定beginPath，那么画第N个路径时会将前面最近指定的beginPath后 的全部路径重新绘制

每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭部分

每次画路径都在前后加context.beginPath（）起始一条或重置当前路径context.closePath（）创建从当前点回到起始点的路径

isPointinPath（）如果指定的点位于当前路径中，则返回true，否则false

 

线段：

context.moveTo（x，y）起

context.lineTo（x，y）终

每次画线都从 moveTo到lineTo的点

若无moveTo那么第一次lineTo的效果和moveTo一样

每次lineTo后若无moveTo那么下次lineTo的开始点为前一次lineTo的结束点

lineWidth 线条宽

lineCap 结束端点样式 butt默认/round突出圆头/square 方头 

lineJoin 两线相交时所创建的拐角的类型

miterLimit 最大斜接长度

clip（）剪切原始画布任意形状和区域

 

曲线：

绘制贝塞尔曲线（三次贝塞尔曲线）

context.bezierCurveTo（cp1x,cp1y,cp2x,cp2y,x,y）

第N个控制点X坐标，第N个控制点Y坐标，终点X坐标，终点Y坐标

绘制二次样条曲线 （二次贝塞尔曲线）

context.quadraticCurveTo（qcpx，qcpy，qx，qy）

控制点X/Y坐标，终点X/Y

 

线性渐变：

var lg = context.createLinearGradient（xStart，yStart，xEnd，yEnd）

渐变开始点X/Y坐标，结束点X/Y坐标

线性渐变颜色：lg.addColorStop（offset，color）

设定的颜色离渐变结束点的偏移量（0-1）

绘制时要使用的颜色 fillStyle

 

径向渐变（发散）：

var rg = context.createRadialGradient（xStart，yStart，radiuStart，xEnd，yEnd，radiusEnd）

径向渐变颜色：rg.addColorStop（offset，color）

发散开始圆心X/Y坐标，发散开始圆的半径，结束圆心X/Y坐标，结束半径

 

圆形组合：

context.globalCompositeOperation = type

type : 

source-over（默认值）在原有图形上绘新图形

destination-over 下

source-in 显示原新交集，在新图形上，所以颜色为新颜色

destination-in 原 原

source-out 只显示新图形非交集部分

destination-out 原

source-atop 显示所有图形和交部分 ，新在上，所以交为新颜色

destination-atop 下 原

lighter 原新都显示 交集部分做颜色叠加

xor 重叠部分不显示

copy 只显示新图形

 

绘制文本：

font 定义字体 

fillText（text，x，y） 在canvas上绘制实心文本

strokeText（text，x，y）空

measureText（）返回包含指定文本宽度的对象

例：

ctx.font="30px Arial" ctx.fillText（"Hello World",10,50）

textAlign设置返回文本内容当前对齐方式

textBaseline 设置绘制文本时使用的当前文本基线

 

图像：

context.drawImage

context.drawImage（image，x绘制图像的x轴坐标，y，w宽，h高）

width返回imageData对象的宽

data返回一个对象，其包含指定的image对象的图像数据

context.drawImage（image，sx，sy，sw，sh，dx，dy，dw，dh）选取图像的一部分绘制

s图像上的  d画在canvas上的

例：

var c = document.getElementById("myCanvas")

var img = document.getElementById("scream")

var ctx = c.getContext("2d")

img.onload = function(){

 ctx.drawImage(img,10,10)

}

 

scale（）缩放当前绘图至更大或更小

rotate（）旋转当前绘图

translate（）重新映射画布上的（0,0）位置

setTransform（）将当前转换重置为单位矩阵 ，然后运行transform（）

createImageData（）创建新的 空白的ImageData对象

getImageData（）返回ImageData对象  该对象为画布上指定的矩形复制像素数据

putImageData（）把图像数据从指定的ImageData对象放回画布上

globalAlpha 设置返回绘图的当前alpha或透明值

globalCompositeOperation 设置新图像如何绘制到已有图像上

save（）保存当前环境的状态

restore（）返回之前保存过的路径状态和属性