canvas元素用于在网页上绘制图形-html5Canvas

最新推荐文章于 2023-06-09 11:35:33 发布

育航家

最新推荐文章于 2023-06-09 11:35:33 发布

阅读量1.6k

点赞数

分类专栏： html5学习文章标签：图形 border javascript html5 c

本文链接：https://blog.csdn.net/TTS_Kevin/article/details/7449254

版权

html5学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

代码：

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>
<canvas id="mycanvas1" width="200" height="100" style="border:1px">
</canvas>
<canvas id="mycanvas2" width="200" height="100" style="border:1px">
</canvas>

var c1=document.getElementById("mycanvas1");
var cxt1=c1.getContext("2d");
cxt1.fillStyle="#FF0000";
cxt1.beginPath();
cxt1.arc(70,18,15,0,Math.PI*2,true);
cxt1.closePath();
cxt1.fill();

var c2=document.getElementById("mycanvas2");
var cxt2=c2.getContext("2d");
var grd=cxt2.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#0000FF");
cxt2.fillStyle=grd;
cxt2.fillRect(0,0,175,50);

</script>

</body>
</html>

演示：