首页 > html5canvas详细使用教程 > html5canvas详细使用教程,HTML5Canvas绘图使用详解

html5canvas详细使用教程,HTML5Canvas绘图使用详解

互联网 2021-06-15 04:37:07 Tags:html5canvas详细使用教程

HTML5Canvas绘图使用详解 gxlcms.comHTML5 Canvas基础教程 (豆瓣)HTML Canvas 参考手册 w3school 在线教程HTML5 canvas动画经典案例和下载前端开发博客16个富有创意的HTML5 Canvas动画特效集合 | HTML5资源教程html5canvas: 教你实现知乎登录动态粒子背景 | 码农网html2canvas将HTML内容写入Canvas生成图片前端开发博客前端使用canvas生成盲水印的加密解密的实现Html5萬仟网

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

html标签:

您的浏览器不支持,建议升级。

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

var canvas = document.getElementById("demo-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)! 本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉本文系统来源:php中文网

免责声明:非注明原创的信息,皆为程序自动获取自互联网,目的在于传递更多信息,不代表本网赞同其观点和对其真实性负责;如此页面有侵犯到您的权益,请给网站管理员发送电子邮件,并提供相关证明(版权证明、身份证正反面、侵权链接),网站管理员将在收到邮件24小时内删除。