Html5——canvas标签使用

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

1、JavaScript 使用 id 来寻找 canvas 元素:

var c=document.getElementById("myCanvas");

2、创建 context 对象:

var cxt=c.getContext("2d"); 

getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

3、下面的两行代码绘制一个红色的矩形:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75); 

fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。