canvas教程

Canvas教程

字号+ 作者:H5之家 来源:H5之家 2015-09-07 19:15 我要评论( )

一.Canvas基本用法canvas对应中文是“画布”,canvas是HTML5的新元素,IE9+支持canvas元素的默认大小是300px * 150px,最简单的代码将生成一个透明的矩形画布,

一.Canvas基本用法

canvas对应中文是“画布”,<canvas>是HTML5的新元素,IE9+支持

canvas元素的默认大小是300px * 150px,最简单的代码将生成一个透明的矩形画布,例如:

<canvas>浏览器不支持canvas</canvas>

如果浏览器支持的话,那么你将不会看到一个300px * 150px的透明块(因为透明了嘛,审查元素就找到它了)。如果浏览器不支持,那么将会显示替换文字:“浏览器不支持canvas”,例如IE8。

有了画布,我好想画点儿什么。不过对于canvas来说,最容易的是画个空心/实心矩形,而不是画条直线,例如:

<canvas id="my_canvas"> 浏览器不支持canvas </canvas><script type="text/javascript">var canvas = document.getElementById('my_canvas');if(canvas.getContext){var ctx = canvas.getContext('2d');//获取2d上下文ctx.strokeStyle = '#f00';//边框设置为红色ctx.lineWidth = 3;//线宽设置为3pxctx.fillStyle = 'rgba(0, 0, 255, 0.5)';//填充半透明蓝色ctx.strokeRect(0, 0, 50, 50);//描边ctx.fillRect(0, 0, 50, 50);//填充}</script>

结果就是这个样子:

二.画方画圆画线

矩形在上面已经画过了,用到了上下文对象的描边和填充方法,除此之外还有一个关于矩形的方法:clearRect()参数意义相同,作用是掏空一个矩形块(用透明色填充指定区域)

画圆相对麻烦一点,比如要画一个圆心为(30, 30)半径为20的圆:

ctx.beginPath();//创建路径ctx.arc(30,30,20,0,Math.PI*2,true);//设置弧线路径ctx.closePath();//闭合路径ctx.stroke();//描边ctx.fill();//填充

arc(x, y, radius, startAngle, endAngle, counterclockwise)方法是用来画弧线的,表示以(x, y)为圆心,radius为半径,起始角度和结束角度分别为startAngle和endAngle,最后一个参数表示前两个角度值是按顺时针还是逆时针算,false表示顺时针。

画线比画圆要简单些(从(30, 30)画一条50px的横线):

ctx.beginPath();//创建路径ctx.moveTo(30, 30);//把起点移动到(30, 30)ctx.lineTo(80, 30);//设置路径连接两点ctx.closePath();//闭合路径ctx.stroke();//绘制

能画线画弧了,那画三角五角也就不在话下了,除了上面用到的路径方法之外,还有以下方法:

设置好路径之后,可以用fill()方法填充或者用stroke()方法描边,还可以用clip()方法对下面的绘图作以限制(相当于PS的选区,详情参见 W3School )

三.画图片

这个功能无疑是最重要的,简单的图形绘制并不是很实用(不信你拿坐标画个肖像画试试)

1.导入图像 2.导出图像

这个当然要比图像操作更重要,拿着画布画了半天,该怎么把它导出成图片呢

canvas.toDataURL():返回图像URL,直接把URL赋值给img的src就可以显示了,它就像一个普通图片地址一样,想怎么用就怎么用。但需要 注意 :

 

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

相关文章
  • fd详细教程|Excel_VBA_详细教程

    fd详细教程|Excel_VBA_详细教程

    2017-05-02 18:01

  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • SketchBook 2014 基础入门视频教程

    SketchBook 2014 基础入门视频教程

    2017-05-01 11:00

网友点评