canvas元素(画布) 新元素

<canvas>--</canvas>

canvas元素是HTML5新增加的元素,单独使用canvas元素是不能实现绘画功能的,必须与JavaScript配合使用才能实现图形、动画等的绘画。html中的canvas元素只是为了把JavaScript绘制的图形布置到网页中的合适位置。在这之前,完成这样的工作,通常需要使用Adobe Flash或者Microsoft SilverLight等插件实现。

具体如何使用JavaScript绘画,如何完成基本的图形,如圆、三角形、多角形、线等工作,请参照HTML API里的canvas画布部分。

canvas元素中有规定图形尺寸的width内容属性与height内容属性,如果没有指定尺寸,其默认值为300×150。

使用例

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>使用canvas绘图</title>

<script type="text/javascript">

<!--

function sample() {

//获取绘画背景

var canvas = document.getElementById('sample1');

if (canvas.getContext) {

var context = canvas.getContext('2d');

//左起20距离顶部40的交点处,绘制宽为50高为100的四角形

context.fillRect(20,40,50,100);

//指定颜色

context.strokeStyle = 'blue'; //框线为蓝色

context.fillStyle = '#E33FE3'; //填充色

//左起180距离顶部80的交点处、绘制宽为100高为50的四角框

context.strokeRect(180,80,100,50);

//左起150距离顶部75的交点处,正时针回转绘制半径为50的半圆。

context.arc(150,75,60,Math.PI*1,Math.PI*2,false);

context.fill();

}

}

</script>

</head>

<body onLoad="sample()">

<h2>使用canvas绘制图形</h2>

<canvas id="sample1" style="background-color:yellow;">

使用canvas元素进行绘画时需要使用的浏览器支持该元素。

</canvas>

</body>

</html>

浏览器上的显示结果↓

 使用canvas绘图

使用canvas绘制图形

使用canvas元素进行绘画时需要使用的浏览器支持该元素。

浏览器支持情况

元素
canvas 9.0 11.0 3.6 5 11