HTML5 Canvas绘图使用详解

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

html标签：

<canvas id="demo-canvas" width="800" height="800">
您的浏览器不支持<canvas>,建议升级。
</canvas>

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

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

使用首先要进行初始化

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:绘制时要使用的颜色

以上就是HTML Canvas绘图使用详解的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！