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

最新推荐文章于 2022-03-17 19:39:13 发布

xiao_w_xiao

最新推荐文章于 2022-03-17 19:39:13 发布

阅读量740

点赞数

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/xiao_w_xiao/article/details/43732927

web 专栏收录该内容

6 篇文章

订阅专栏

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>