2015
06-15

html5 canvas绘图标签详细使用教程,附示例

<canvas>标签是html5中新添加的元素，用于页面中绘图功能，借助于js<canvas>可以绘制出各种您需要的图形，本文就来了解一下<canvas>绘图标签的详细使用教程。

<canvas>html标签：

<canvas> 您的浏览器不支持<canvas>,建议升级。 </canvas>

我们可能通过js的document.getElementById获取<canvas>

<script type="text/javascript"> var canvas = document.getElementById("demo-canvas"); <script>

使用<canvas>首先要进行初始化

if (canvas.getContext){ var ctx = canvas.getContext('2d'); //目前canvas只支持2d，不支持3d } canvas 的基本用法

ctx.fillRect(x,y,width,height)
画一个填充的矩形，x, y是矩形左上坐标，width,height是矩形的宽度和高度。
示例

ctx.strokeRect(x,y,width,height)
画一个带边框的矩形，只画线不填充，参数同上。
示例

ctx.clearRect(x,y,width,height)
把指定的区域删除，参数同上。
示例

ctx.fillStyle(“”)
填充颜色（颜色值可直接用颜色名称:”red” “green” “blue”， 十六进制颜色值: “#EEEEFF”， rgb(1-255,1-255,1-255)， rgba(1-255,1-255,1-255,透明度)）。
示例

ctx.strokeStyle(“”)
边框颜色（颜色同上）。
示例

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
画圆（弧）,画圆或者圆弧。x,y为圆心坐标，radius为半径，startAngle,endAngle为开始/结束划圆的角度，anticlockwise为是否逆时针画圆（True为逆时针，False为顺时针）。
示例

路径 context.beginPath() context.closePath()
画圆并不单单是直接用arc，它还用到beginPath()方法，和closePath()方法，如果没有重新beginPath那么前面的路劲会保留。
a、系统默认在绘制第一个路径的开始点为beginPath。
b、如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制。
c、每次调用context.fill()的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分。
示例

绘制线段 context.moveTo(x,y) context.lineTo(x,y)
从moveTo(x,y) 到 lineTo(x,y)绘制直线，如果没有moveTo那么起点就是linkTo，每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前一次lineTo的结束点。
示例

绘制贝塞尔曲线（贝济埃、bezier） context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) ,绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy)
cp1x:第一个控制点x坐标
cp1y:第一个控制点y坐标
cp2x:第二个控制点x坐标
cp2y:第二个控制点y坐标
x:终点x坐标
y:终点y坐标qcpx:二次样条曲线控制点x坐标
qcpy:二次样条曲线控制点y坐标
qx:二次样条曲线终点x坐标
qy:二次样条曲线终点y坐标
示例

线性渐变 var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)线性渐变颜色lg.addColorStop(offset,color)
xstart:渐变开始点x坐标
ystart:渐变开始点y坐标
xEnd:渐变结束点x坐标
yEnd:渐变结束点y坐标
offset:设定的颜色离渐变结束点的偏移量(0~1)
color:绘制时要使用的颜色
示例

径向渐变（发散）var rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)径向渐变（发散）颜色rg.addColorStop(offset,color)
xStart:发散开始圆心x坐标
yStart:发散开始圆心y坐标
radiusStart:发散开始圆的半径
xEnd:发散结束圆心的x坐标
yEnd:发散结束圆心的y坐标
radiusEnd:发散结束圆的半径
offset:设定的颜色离渐变结束点的偏移量(0~1)
color:绘制时要使用的颜色
示例

ps:本博文参考，感谢【o苦bd程序猿】

本文固定链接:

转载请注明: 码农一号 2015年06月15日 于 码农小兵 发表

分享 3

最后编辑：2015-06-15

作者：码农一号

这个作者貌似有点懒，什么都没有留下。

捐 赠如果您觉得这篇文章有用处，请支持作者！鼓励作者写出更好更多的文章！

canvas绘图，html5，教程

html5 canvas绘图之context.fillRect 矩形填充实例

PHPCMS V9二次开发教程，一个健康测试模块

您可能还会对这些文章感兴趣！

《html5 canvas绘图标签详细使用教程,附示例》有 1 条评论

Pingback 引用通告： html5 canvas绘图之context.clearRect 区域删除实例 - 码农小兵

留下一个回复