当前阅读教程:HTML5入门电子教程 > 使用 JavaScript 来绘制图像 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 创建一个画布(Canvas) | 下一篇: Canvas 坐标 |
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。 下面我们来看下在网页中的效果,示例 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>使用 JavaScript 来绘制图像</title> </head> <body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 您的浏览器不支持 HTML5 canvas 标签。 </canvas>
<script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>
</body> </html> 效果如图7-2。 解析第1步:找到 <canvas> 元素: var c=document.getElementById("myCanvas"); 第2步:创建 context 对象: var ctx=c.getContext("2d"); getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 第3步:下面的两行代码绘制一个红色的矩形: ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); 设置fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)。 fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。 |
|
上一篇: 创建一个画布(Canvas) | 下一篇: Canvas 坐标 |