canvas标签

最新推荐文章于 2024-01-26 14:38:13 发布

柳LL

最新推荐文章于 2024-01-26 14:38:13 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/yllmyl/article/details/80358053

版权

1.canvas标签

描述：用来“替代”flash等其他用于做动画或游戏的插件的一个新标签

说明：

（1）<canvas width="xx",height="xx'></canvas>

（2）canvas标签由于是新标签，并不是所有的浏览器都支持、

需要在canvas标签内添加提示性文本<canvas>您的浏览器不支持</canvas>

（3）canvas标签可以认为是一个画布（画板），他内部的所有内容通过了js脚本添加的

（4）使用：在脚本中canvas标签只是一张画布，而如果想要在画布上进行绘制操作canvas标签需要一个画家来帮助绘制

方法：var huaban =document.querySelector('.canvas');

var bicaso = huaban.getContext('2d');

画家有一个官方标准的称呼：[canvas上下文对象]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style type="text/css">
canvas{
border:1px solid black;
}
</style>
</head>
<body>
<canvas width ="300" height="200" class='canvas'>您浏览器不支持canvas!</canvas>
</body>

<script>
var huaban = document.querySelector('.canvas');
var bicaso = huaban.getContext('2d');
console.log(bicaso);
var left =0;
var fangxiang =0;
var timer =null;
bicaso.fillstyle='pink';
timer = setInterval(function(){
if(left==0)fangxiang = 1;
if(left==250) fangxiang= 0;
switch(fangxiang){
case 0:{
bicaso.clearRect(0,0,300,200);
bicaso.fillRect(--left,10,50,50);
}
break;
case 1:{
bicaso.clearRect(0,0,300,200);
bicaso.fillRect(++left,10,50,50);
}
break;
}
},10);
bicaso.clearRect(0,0,300,200);
bicaso.fillRect(10,10,50,50);
bicaso.strokeRect(150,50,50,50);
bicaso.clearRect(5,5,50,50);

路径绘制
bicaso.beginPath();
bicaso.moveTo(50,50);
bicaso.lineTo(100,50);
bicaso.lineTo(75,100);
bicaso.lineTo(50,50);
bicaso.strokeStyle='orange';
bicaso.fillStyle ="green";
bicaso.lineWidth="10";
bicaso.stroke();
bicaso.fill();
bicaso.closePath();
设置填充和封闭图形填充和开启路径结束路径
bicaso.beginPath();
bicaso.moveTo(50,50);
bicaso.lineTo(100,50);
bicaso.lineTo(75,100);
bicaso.lineTo(50,50);
bicaso.fillStyle ="green";
bicaso.fill();
bicaso.closePath();
圆弧
bicaso.beginPath();
bicaso.arc(150,100,50,1.5*Math.PI,0*Math.PI,true);
bicaso.stroke();
bicaso.closePath();
</script>
</body>
</html>

柳LL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas标签

1.canvas标签描述：用来“替代”flash等其他用于做动画或游戏的插件的一个新标签说明：（1）&lt;canvas width="xx",height="xx'&gt;&lt;/canvas&gt;（2）canvas标签由于是新标签，并不是所有的浏览器都支持、需要在canvas标签内添加提示性文本&lt;canvas&gt;您的浏览器不支持&lt;/canvas&gt;...
复制链接

扫一扫