标签:ima ace mil eee idt mon family har return
<canvas>是一个绘制图形的 HTML 元素,但它必须使用脚本语言(通常是Javascript)绘制图形。
下面是canvas的一个小示例:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./script.js"></script>
</head>
<body onload="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);//绘制矩形边框
}
效果图:
标签:ima ace mil eee idt mon family har return
原文地址:http://www.cnblogs.com/lushj/p/7147896.html