第十五章 使用Canvas绘图
2015-08-19 21:36:59 16 举报AI智能生成
Canvas是一个强大的HTML5元素，它提供了一个可以在网页上绘制图形的场所。通过JavaScript，我们可以使用Canvas API来控制这个场所，实现各种复杂的绘图效果。在本章中，我们将学习如何使用Canvas进行基本的2D绘图，包括绘制线条、矩形、圆形等基本图形，以及如何设置颜色、填充等属性。此外，我们还将学习如何使用路径来绘制更复杂的图形，如曲线、多边形等。最后，我们将探讨如何使用Canvas来实现动画效果，让网页更加生动有趣。无论你是初学者还是有一定经验的开发者，都可以从本章中学到有用的知识。
作者其他创作
大纲/内容
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
表示后绘制的图形怎样与先绘制的图形结合
canvas基本用法
设置width和height属性，指定绘图区域的大小
调用getContext()并传入上下文的名字，如：2d
可使用toDataURL(MIME类型参数)，导出在
WebGL(3D上下文)
参考：http://www.hiwebgl.com/?p=42
0 条评论
下一页
