HTML5中的Canvas

最新推荐文章于 2022-07-15 23:10:41 发布

温建江

最新推荐文章于 2022-07-15 23:10:41 发布

阅读量928

点赞数

分类专栏： HTML5 文章标签： HTML5 Canvas 画布

本文链接：https://blog.csdn.net/feilong_1212/article/details/9089863

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、首先制作一个画布<canvas></canvas>

2、开始画一个矩形Rect

<!DOCTYPE html>

<html>
<head>
<meta charset='utf-8'/>
</head>
<body>
<canvas id='myCanvas' width='500px' height='300px' style="border:1px solid #ccc">您的浏览器不支持</canvas>
</body>
<script>
var canvas=document.getElementById('myCanvas');
var ctx= canvas.getContext('2d');
ctx.fillStyle="#FF0000";
ctx.fillRect(10,10,170,50);
</script>

</html>

2、利用canvas画一个圆

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
</head>
<body>
<canvas id='myCanvas' width='500px' height='300px' style="border:1px solid #ccc">您的浏览器不支持</canvas>
</body>
<script>
var canvas=document.getElementById('myCanvas');
var ctx= canvas.getContext('2d');
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc(70,80,60,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
</script>
</html>

3、画线条

var cxt=c.getContext("2d");cxt.moveTo(10,10);

cxt.lineTo(150,50);

cxt.lineTo(10,50);cxt.stroke();
</script>
</html>

4、渐变的颜色

var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);

grd.addColorStop(0,"#FF0000");

grd.addColorStop(1,"#00FF00");

cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);
</script>
</html>

温建江

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5中的Canvas

1、首先制作一个画布2、开始画一个矩形Rect 您的浏览器不支持var canvas=document.getElementById('myCanvas');var ctx= canvas.getContext('2d');ctx.fillStyle="#FF0000";ctx.fillRect(10,10,170,50);
复制链接

扫一扫