H5

 

Canvas 元素拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,使用JavaScript在网页上绘制图像。

  • 创建Canvas元素(规定元素的id、宽度和高度,在css里写宽高有比例问题)
<canvas id="myCanvas" width="200" height="100"></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>

JS使用id来寻找canvas元素

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

创建context对象

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

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

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

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

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

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注