首页 > web前端 > html/css/css3 > html5 canvas绘图标签详细使用教程,附示例
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
06-15

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

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

<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:绘制时要使用的颜色
    示例
ps:本博文参考http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html,感谢【o苦bd程序猿】
最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

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

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

留下一个回复

你的email不会被公开。

*