标签:style blog http ar 使用 sp java strong on
1、使用canvas元素
HTML5新增了一个<canvas.../>元素,该元素专门用于绘制图形。但实际上<canvas.../>元素自身并不绘制图形,它只是相当于一张空画布。必须要用javascript脚本进行绘制。
在html页面上定义<canvas.../>与定义其它普通元素并无任何不同,为了向<canvas.../>元素上绘图,必须经过如下三个步骤:
1、获取<canvas.../>元素对应的dom对象,这是一个canvas对象。
2、调用canvas对象的getContext方法,该方法返回一个CanvasRenderingContext2D对象,该对象可以绘制图形。
3、调用CanvasRenderingContext2D对象的方法绘图。
以下为示例代码:
<html>
<body>
<h2>画图入门</h2>
<canvas id="mc" width="300" height="180" style="border:1px solid black"></canvas>
<script>
var canvas=document.getElementById("mc");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#f00";
ctx.fillRect(30,40,80,100);
</script>
</body>
</html>
运行效果如下:
标签:style blog http ar 使用 sp java strong on
原文地址:http://www.cnblogs.com/yhq361/p/4150240.html