canvas教程

Canvas系列教程二:矩形和线条的绘制

字号+ 作者:H5之家 来源:H5之家 2017-01-26 14:00 我要评论( )

通过 fillStyle和 strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和 CSS 一样:十六进制数、rgb()、rgba() 和 hsla。通过 fillRect可以绘制带

Canvas系列教程二:矩形和线条的绘制

[日期:2012-02-19]    来源:HTML5中文网     作者:admin    [字体:]    阅读: 次

通过 fillStyle和 strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和 CSS 一样:十六进制数、rgb()、rgba() 和 hsla。通过 fillRect可以绘制带填充的矩形。使用 strokeRect 可以绘…

通过 fillStyle和 strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和 CSS 一样:十六进制数、rgb()、rgba() 和 hsla。通过 fillRect可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。如果想清除部分 Canvas 可以使用 clearRect。上述三个方法的参数相同:x, y, width, height。前两个参数设定 (x,y) 坐标,后两个参数设置矩形的高度和宽度。可以使用 lineWidth属性改变线条粗细。让我们看看使用了fillRect,strokeRect clearRect 和其他的例子:

JavaScript Code复制内容到剪贴板

此例子效果图见下图

路径

通过 canvas 路径(path)可以绘制任意形状。可以先绘制轮廓,然后绘制边框和填充。创建自定义形状很简单,使用 beginPath()开始绘制,然后使用直线、曲线和其他图形绘制你的图形。绘制完毕后调用 fill 和 stroke 即可添加填充或者设置边框。调用 closePath() 结束自定义图形绘制。下面是一个绘制三角形的例子:

JavaScript Code复制内容到剪贴板

其效果图见下图

另一个较复杂的例子中使用了直线、曲线和圆弧。

感谢您对【51运维网 】的支持,我们为您免费提供《Canvas系列教程二:矩形和线条的绘制》技术文章,《Canvas系列教程二:矩形和线条的绘制》详细使用和说明,有时《Canvas系列教程二:矩形和线条的绘制》可能不完善、敬请谅解!如果《Canvas系列教程二:矩形和线条的绘制》有错误请给我们留言,我们将尽快修复文章错误,如果您觉得本站不错,请分享给周围的朋友!谢谢!

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 关于请教:canvas的画图问题的搜索推荐

    关于请教:canvas的画图问题的搜索推荐

    2017-01-26 13:02

  • Canvas教程(1)——HTML5简介

    Canvas教程(1)——HTML5简介

    2017-01-26 12:06

  • 《html5 canvas动画》——万有引力

    《html5 canvas动画》——万有引力

    2017-01-25 18:06

  • HTML5 canvas基础入门教程

    HTML5 canvas基础入门教程

    2017-01-25 18:04

网友点评
u