HTML5 画布 Canvas

最新推荐文章于 2022-09-04 16:17:06 发布

左阳暖

最新推荐文章于 2022-09-04 16:17:06 发布

阅读量1.4k

点赞数

分类专栏：前端基础

本文链接：https://blog.youkuaiyun.com/sunshumin/article/details/39618075

版权

前端基础专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas元素结合JavaScript在网页上进行图像绘制，包括设定图形的尺寸、颜色和位置，以绘制圆形为例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

通过规定尺寸、颜色和位置，来绘制一个圆：

<!DOCTYPE htma>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #3CF;">
Your browser does not support the canvers element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#3CF";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();


</script>


</body>
</html>

通过指定从何处开始，在何处结束，来绘制一条线

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

</body>
</html>

使用您指定的颜色来绘制渐变背景

<!DOCTYPE htma>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:4px solid #3CF;">
Your browser does not support the canvers element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
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>


</body>
</html>

把一幅图像放置到画布上

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);

</script>

</body>
</html>