首页 > 代码库 > canvas
canvas
<canvas>是一个绘制图形的 HTML 元素，但它必须使用脚本语言（通常是Javascript）绘制图形。
下面是canvas的一个小示例：
HTML：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://www.mamicode.com/script.js"></script>
</head>
<body onl oad="draw(canvas)">
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>
-----------------------------------我是华丽丽的分割线-----------------------------------------------------------------
script.js:
function draw(){
var canvas = document.getElementById("canvas");//获取canvas
if(canvas == null)
return false;
var context = canvas.getContext("2d");
context.fillStyle = "#eee";//填充颜色
//context.fillRect(x,y,width,height);//x指矩形起点横坐标，y指矩形起点纵坐标，width矩形长度，height矩形高度，坐标原点为画布最左上角
context.fillRect(0,0,400,300);
context.fillStyle="red";//设定图形样式
context.strokeStyle="blue";//设定图形边框样式
context.lineWidth="1";//边框宽度
context.fillRect(50,50,100,100);//绘制矩形
context.strokeRect(50,50,100,100);//绘制矩形边框
}
效果图：
canvas