第十五章 使用Canvas绘图
2015-08-22 23:54:23 2 举报AI智能生成
登录查看完整内容
Canvas是一个HTML5元素，它就像一块画布，可以让我们使用JavaScript在上面绘制各种图形。要使用Canvas绘图，首先需要在HTML文件中创建一个Canvas元素，并为其指定一个ID。然后，在JavaScript中通过该ID获取Canvas元素的引用，并创建一个2D渲染上下文。接下来，可以使用Canvas API提供的各种方法来绘制图形，如绘制矩形、圆形、线条等。此外，还可以通过变换操作来移动、旋转或缩放图形。最后，可以使用`context.drawImage()`方法将图像绘制到Canvas上。总之，Canvas是一个非常强大的工具，可以帮助我们轻松地实现各种复杂的绘图需求。
作者其他创作
大纲/内容
Canvas绘图
canvas基本用法
设置width和height属性，指定绘图区域的大小
调用getContext()并传入上下文的名字，如：2d
可使用toDataURL(MIME类型参数)，导出在元素绘制的图像
2D上下文
填充和描边
绘制矩形
矩形是唯一一个可在2D上下文中绘制的形状
相关方法
fillRect()
4个参数：矩形的x坐标、y坐标、宽度、高度
为画布上绘制的矩形填充指定的颜色
通过fillStyle属性指定填充的颜色
strokeRect()
参数同上，单位是像素
为画布上绘制的矩形使用指定的颜色描边
通过strokeStyle属性指定描边颜色
lineWidth用于控制描边线条的宽度
clearRect()
参数同fillRect()方法
用于清除画布上的矩形区域
绘制路径
beginPath()
开始绘制新路径
绘制实际路径方法
绘制一条二次曲线
绘制矩形路径
closePath()
可创建一条连接起点的曲线
用于在路径被关闭之前确定画布上的某一点是否位于路径上
clip()
可在路径上创建一个剪切区域
可使用fill()方法填充，stroke()方法描边
绘制文本
fillText()
4个参数：要绘制的文本字符串，x坐标，y坐标，可选的最大像素宽度
属性
font
文本样式，大小及字体
textAlign
文本对齐方式
textBaseline
使用fillStyle属性绘制文本
strokeText()
参数及属性同上
使用strokeStyle属性为文本描边
measureText()
用于确定文本大小，有一个参数：要绘制的文本
TextMetrics对象
变换
通过上下文的变换(变换矩阵)，可把处理后的图像绘制到画布上
变换矩阵的方法
rotate(angle)
围绕原点旋转图像angle弧度
缩放图像
直接修改变换矩阵
将变换矩阵重置为默认状态，再调用transform()
跟踪上下文变换的方法
save()
调用save()后，可将当时的所有设置保存在栈结构中
连续调用save()，可把更多设置保存在栈结构中，然后再连续调用restore()可一级级返回
注：save()保存的只是对绘图上下文的设置和变换，不会保存绘图上下文的内容
restore()
在保存设置的栈结构中向前返回一级，恢复之前的状态
绘制图像
drawImage()
将图像绘制到画布上
阴影
可根据以下属性未形状或路径绘制出阴影
shadowColor
用css颜色格式表示的阴影颜色，默认黑色
shadowOffsetX
形状或路径x轴方向的阴影偏移量，默认为0
shadowOffsetY
形状或路径y轴方向的阴影偏移量，默认为0
shadowBlur
模糊的像素数，默认为0(不模糊)
渐变
createLinearGradient()
创建一个线性渐变对象
createRadialGradient()
创建一个径向渐变对象
addColorStop()
为创建的渐变对象指定色标
2个参数：色标位置(0~1之间)和CSS颜色值
模式
模式可用来填充或描边图像
createPattern()
用来创建一个新模式
参数：一个元素，一个表示如何重复图像的字符串
使用图像数据
getImageData()
通过该方法获取原始图像数据
putImageData()
把图像数据绘制到画布上
合成
globalAlpha属性
globalCompositionOperation
表示后绘制的图形怎样与先绘制的图形结合
WebGL(3D上下文)
参考：http://www.hiwebgl.com/?p=42
0 条评论
回复 删除
下一页
