- HTML5 canvas 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。
- canvas标签只是图形容器,您必须使用脚本来绘制图形。
- 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>绘制一个黄色的矩形,边框为黑色</title>
<style type="text/css">
canvas {border:1px solid #000;
}
</style>
<script type="text/javascript">
function DrawRect(){var canvas=document.getElementById("canvas");var context = canvas.getContext("2d");context.strokeStyle="#000"; context.lineWidth=1; context.strokeRect(50,50,150,100); context.fillStyle="#f90"; context.fillRect(50,50,150,100);
}
window.addEventListener("load",DrawRect,true);
</script>
</head>
<body style="overflow:hidden">
<canvas id="canvas" width="400" height="300">你的浏览器不支持该功能!</canvas>
</body>
</html>