首页 > 代码库 > HTML5的绘画支持（一）
HTML5的绘画支持（一）
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>
运行效果如下：
HTML5的绘画支持（一）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。