第十五章 使用Canvas绘图
2015-08-22 23:54:23 4 举报AI智能生成
Canvas是一个HTML5元素，它就像一块画布，可以让我们使用JavaScript在上面绘制各种图形。要使用Canvas绘图，首先需要在HTML文件中创建一个Canvas元素，并为其指定一个ID。然后，在JavaScript中通过该ID获取Canvas元素的引用，并创建一个2D渲染上下文。接下来，可以使用Canvas API提供的各种方法来绘制图形，如绘制矩形、圆形、线条等。此外，还可以通过变换操作来移动、旋转或缩放图形。最后，可以使用`context.drawImage()`方法将图像绘制到Canvas上。总之，Canvas是一个非常强大的工具，可以帮助我们轻松地实现各种复杂的绘图需求。
作者其他创作
大纲/内容
canvas基本用法
设置width和height属性，指定绘图区域的大小
调用getContext()并传入上下文的名字，如：2d
可使用toDataURL(MIME类型参数)，导出在
2D上下文
填充和描边
取决于fillStyle和strokeStyle属性,属性值可以是字符串,渐变对象,模式对象
绘制矩形
矩形是唯一一个可在2D上下文中绘制的形状
相关方法
fillRect()
4个参数：矩形的x坐标、y坐标、宽度、高度
为画布上绘制的矩形填充指定的颜色
通过fillStyle属性指定填充的颜色
strokeRect()
参数同上，单位是像素
为画布上绘制的矩形使用指定的颜色描边
通过strokeStyle属性指定描边颜色
lineWidth用于控制描边线条的宽度
lineCap属性可控制线条末端形状是平头,圆头,方头(butt,round,square)
lineJoin属性可控制线条相交方式圆交,斜交,斜接(round,bevel,miter)
clearRect()
参数同fillRect()方法
用于清除画布上的矩形区域
绘制路径
beginPath()
开始绘制新路径
绘制实际路径方法
arc(x,y,半径,起始角度,结束角度,是否逆时针计算(false为顺时针))
以(x,y)为圆心绘制弧线
arcTo(x1,y1,x2,y2,radius)
从上一点开始到(x2,y2)为止绘制弧线,以radius为半径,穿过(x1,y1)
bezierCurveTo(c1x,c1y,c2x,c2y,x,y)
lineTo(x,y)
从上一点开始绘制一条直线，到(x,y)为止
moveTo(x,y)
将绘图游标移动到(x,y)，不画线
quadraticCurveTo(cx,cy,x,y)
绘制一条二次曲线
rect(x,y,width,height)
绘制矩形路径
closePath()
可创建一条连接起点的曲线
isPointInPath(x,y)
用于在路径被关闭之前确定画布上的某一点是否位于路径上
clip()
可在路径上创建一个剪切区域
可使用fill()方法填充，stroke()方法描边
绘制文本
相关方法
fillText()
4个参数：要绘制的文本字符串，x坐标，y坐标，可选的最大像素宽度
属性
font
文本样式，大小及字体
textAlign
文本对齐方式
textBaseline
文本的基线,值为top/hanging/middle/alphabetic/ideographic/bottom
使用fillStyle属性绘制文本
strokeText()
参数及属性同上
使用strokeStyle属性为文本描边
measureText()
用于确定文本大小，有一个参数：要绘制的文本
TextMetrics对象
变换
通过上下文的变换(变换矩阵)，可把处理后的图像绘制到画布上
变换矩阵的方法
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()
调用save()后，可将当时的所有设置保存在栈结构中
连续调用save()，可把更多设置保存在栈结构中，然后再连续调用restore()可一级级返回
注：save()保存的只是对绘图上下文的设置和变换，不会保存绘图上下文的内容
restore()
在保存设置的栈结构中向前返回一级，恢复之前的状态
绘制图像
drawImage()
将图像绘制到画布上
参数：要绘制的图像，绘制图像的起点x,y坐标，源图像的宽度和高度，目标图像的x,y坐标，目标图像的宽度和高度，
阴影
可根据以下属性未形状或路径绘制出阴影
shadowColor
用css颜色格式表示的阴影颜色，默认黑色
shadowOffsetX
形状或路径x轴方向的阴影偏移量，默认为0
shadowOffsetY
形状或路径y轴方向的阴影偏移量，默认为0
shadowBlur
模糊的像素数，默认为0(不模糊)
渐变
createLinearGradient()
创建一个线性渐变对象
参数：起点x,y坐标，终点x,y坐标
createRadialGradient()
创建一个径向渐变对象
参数：起点圆心(x,y)及半径，终点圆心(x,y)及半径
addColorStop()
为创建的渐变对象指定色标
2个参数：色标位置(0~1之间)和CSS颜色值
模式
模式可用来填充或描边图像
createPattern()
用来创建一个新模式
参数：一个![]()
元素，一个表示如何重复图像的字符串
使用图像数据
getImageData()
通过该方法获取原始图像数据
参数：要取得其数据画面区域的x,y坐标，该区域的像素宽度和高度
putImageData()
把图像数据绘制到画布上
合成
globalAlpha属性
值介于[0,1]之间，用于指定所有绘制的透明度
globalCompositionOperation
表示后绘制的图形怎样与先绘制的图形结合
WebGL(3D上下文)
参考：http://www.hiwebgl.com/?p=42
0 条评论
下一页
