JavaScript Canvas绘图

HTML 5最受欢迎的就是canvas元素 IE9+,除了基本的2D上下文还建议了一个WebGL的3D上下文

使用<canvas>元素的时候首先要指定width height属性来指定画图的大小文本内容可以指定为不支持canvas元素的提示
先取得绘图上下文对象的引用，调用getContext() 方法来传入2d来绘制2d的内容

var draw = document.getElementById("xx");
if(draw.getContext){ // 有的浏览器虽然会创建HTML外的元素对象，单对象中没有getContext方法
    var context = draw.getContext("2d");
}

2D上下文
fillStyle/strokeStyle 填充和描边参数为颜色的各种表示方法
fillRect/strokeRect/clearRect 矩形的绘制接收四个参数，xy坐标，矩形的宽高，单位像素
lineWidth/lineCap/lineJoin 描边的线条宽度/线头的样式(butt,round,square)/相交线的方式(round,bevel,miter)

绘制路径必须要调用beginPath()

arc(x,y,radius,startAngle,endAngle,countclockwise): 最后一个false为顺时针方向计算
arcTo(x1,y1,x2,y2,radius): 从上一点开始到(x2,y2),并且要穿过(x1,y1)以给定的radius
bezierCurveTo(c1x,c1y,c2x,c2y,x,y): 以前连个点为控制点从上一个点到(x,y)绘制一条曲线
lineTo(x,y): 从上一个的点到(x,y) 画一条线
moveTo(x,y): 移动到(x,y)
quadraticCurveTo(cx,cy,x,y): 第一个点为控制点到(x,y) 绘制一个二次曲线
rect(x,y,width,height): 矩形

closePath() 连接到起点，fill()/stroke()/clip() 填充/描边/剪切
isPointInPath(x,y) 判断一个点是否在路径上

绘制文本
fillText()/strokeText() 均可接收四个参数，绘制的文本字符串，x,y,和可选的最大像素宽度，这两个方法以下面的三个属性为基础

font : 文本样式 大小 字体样式
textAlign: start/end[建议使用] right/left/center,
textBaseline: top/hanging/middle/alphabetic/ideographic/bottom

context.font = 'bold 16px Arial';
context.fillText("HAHA",100,100);

变换

rotate(angle): 围绕远点旋转angle弧度
scale(scaleX,scaleY): 缩放
translate(x,y): 将坐标原点移动到(x,y)
transform(m1_1,m1_2,m2_1,m2_2,dx,dy):乘以矩阵
setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy): 变换矩阵重置，然后再调用transform

刚才执行的变换均在当前的上下文有效，执行save() 将当前的状态保存在一个栈结构中，然后可以对上下文进行其他修改，想要之前的状态时可以restore() 把之前保存的调用出来

绘制图像
drawImage() 参数有九个要绘制的图形，原图像的x,y,width,height 目标图形x,y,width,height

绘制阴影
shadowColor/shadowOffsetX/shadowOffsetY/shadowBlur

渐变
createLinearGradinent() 四个参数起始x,y 终点x,y
addColorStop(pos,color) pos介于0-1之间
context.createRadialGradient(x,y,radius,xd,yd,radiusd)

createRectLinearGradient(context,x,y,width,height){
    return context.createLinearGradient(x,y,x+width,y+height);
}
//gradient = createLinearGradient()
// fillStyle = gradient

模式
就是重复的图形
createPattern(img,"mode") mode= repeat/no-repeat/repeat-x/repeat-y
fillStyle = pattern;

使用图像的数据
可以通过getImageData() 获取图片的原始信息，参数为四个获取原始数据中的x，y坐标和该区域的宽高；返回的对象的实例有三个属性，width height 和data。data 是一个数组用来返回红绿蓝及透明度

合成
globalAlaph/globalCompositionOperation 前者设置全局透明度，后者设置绘制后的图像如何和前面的图形结合

source-over: 默认，后绘制的再先绘制的图形上面
source-in: 重叠部分可见，其他部分透明
source-out: 不重叠可见，先绘制的完全透明
source-atop: 重叠可见，先绘制的不受影响
destination-over: 后绘制的再先绘制的图形下面
destination-in: 不重叠部分完全透明
destination-out: 后绘制的擦除与先绘制的重叠的部分
destination-atop: 不重叠的部分，先绘制的变透明
lighter: 重叠部分相加
copy: 后绘制的替换先绘制重叠的部分
xor: 重叠部分异或操作

详细参考

WebGL

浏览器中的WebGL是基于OpenGL ES 2.0

JavaScript Canvas绘图

WebGL

猜你喜欢