HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
显示一个红色的矩形下面绘制一个会动的一条线:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<!-- js引用包 -->
<script src='http://libs.baidu.com/jquery/1.9.0/jquery.min.js'></script>
</head>
<style type="text/css">
canvas{
border:1px solid black;
}
</style>
</head>
<body>
<canvas id="a_canvas" width="300" height="300"></canvas>
<script>
var i;
var m,h;
var canvas=document.getElementById("a_canvas");
var ctx=canvas.getContext("2d");
function draw(context,color){
context.fillStyle=color;
context.fillRect(0,0,100,3);
}
function rotateD(context,deg){
var rad=deg*Math.PI/180;
context.rotate(rad);
}
ctx.translate(105,130);
var date=new Date();
i=date.getSeconds();
m=date.getMinutes();
h=date.getHours();
var sss=document.getElementById("ss");
setInterval(function(){
var k=0;
if(k<360){
i=date.getSeconds();
ctx.clearRect(-105,-130,300,300);
rotateD(ctx,i*0.1);
draw(ctx,"blue");
k=k+1;
}
k=0;
},1000);
</script>
<div id="ss"></div>
</body>
</html>