在页面中插入canvas元素

HTML5 元素用于图形的绘制，经过脚本 (一般是JavaScript)来完成。javascript

canvas是HTML5在网页上绘制图形的容器。页面上的canvas元素至关于一块矩形画布。java

标签只是图形容器，您必须使用脚原本绘制图形。
注意: 默认状况下 元素没有边框和内容。web

<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>

绘制图形的基本方法

步骤：canvas

1. 获取canvas元素
2. 获取绘图上下文（context）
3. 设定绘图样式（style）
4. 绘制图形

canvas 元素自己是没有绘图能力的。全部的绘制工做必须在 JavaScript 内部完成：
首先，找到 元素:浏览器

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

而后，建立 context 对象：svg

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

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

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="#FF00FF";
context.fillRect(50,25,100,50);
</script>

使用canvas

<canvas id="myCanvas" style="border:1px solid;" width="200" height="100">
您的浏览器不支持canvas元素，请更新或更换您的浏览器。
</canvas>

<canvas id="myCanvas" width="200" height="100">
<!--此处放置用于绘制图形的JavaScript代码。-->
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas"); 
if (canvas.getContext){ 
    alert("您的浏览器支持canvas!");
}else{ 
    alert("您的浏览器不支持canvas!"); 
}
</script>