时间:2021-07-01 10:21:17 帮助过:34人阅读
<canvas>html标签:
<canvas id="demo-canvas" width="800" height="800"> 您的浏览器不支持<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:绘制时要使用的颜色
以上就是HTML Canvas绘图使用详解的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!