Canvas简介

宁波网站建设 | 2017-01-16

canvas是html5新增的一个标签,它的主要作用是画矢量图,这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。canvas能做动画,但不是为动画而生,能做游戏,能做特别炫的效果,主要是为画图而生。


 

canvas标签为<canvas id="myCanvas" width="" height="">不支持canvas查看的内容<canvas>。canvas的绘制环境(必须取的canvas元素及绘图上下文):getContext('2d'),目前仅支持2D场景。
用canvas绘制路径:beginPath() :开始一个路径;moveTo(x,y): 把路径移到画布中的指定点,不创建路径;lineTo(x,y) :添加一个新点、画线;stroke() :绘制已定义好的路径;fillStyle:用来设置填充颜色;strokeStyle:用来设置描边颜色;closePath() :关闭路径;fill() :填充已定义好的路径;clearRect(x,y,width,height):删除一个画布的矩形区域。

 

绘制圆弧:arcTo(x1,y1,x2,y2,r);x1、y1为绘制图形原本该达到的坐标  x2、y2为绘制圆弧的结束坐标  r为圆弧半径。


    绘制二次贝塞尔曲线quadraticCurveTo(dx1,dy1,x,y);dx1 dy1为转折点坐标  x,y为结束点坐标。


    绘制三次贝塞尔曲线:bezierCurveTo(dx1,dy1,dx2,dy2,x,y)  dx1 dy1为第一个转折点坐标dx2 dy2为第二个转折点坐标 x,y 为结束点坐标。


    canvas中的变换:变换translate(x,y):偏移:从起始点为基准点,移动当前坐标;rotate:旋转:参数弧度;scale:缩放。canvas中的缩放:线性渐变:createLinearGradient(x1,y1,x2,y2);第一组参数:起始点坐标;第二组参数:结束点参数。addColorStop(位置,颜色):添加渐变色。放射性渐变:createRadialGradient(x1,y1,r,x2,y2,r);参数:第一个圆的半径和坐标,第二个圆的半径和坐标。


 

上一篇:html5的重大改变下一篇:慕枫五步建站——慕枫模板库,让高端平民化
联系电话 400-6065-301

微信咨询 寒总监