利用Canvas作图示例实例-小小

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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值