html 5 画布，画线条，画圆

最新推荐文章于 2024-07-24 15:43:52 发布

weichen_2599

最新推荐文章于 2024-07-24 15:43:52 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weichen_2599/article/details/9299819

本文介绍了如何使用JavaScript在HTML5的canvas元素上绘制图形，包括获取鼠标坐标、画线条及画圆饼图等基本图形绘制方法。

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

<p>把鼠标悬停在下面的矩形中可以看到坐标：</p>
<div id = "coordiv" onmousemove="cnvs_getCoordinates(event)"onmouseout = "cnvs_clearCoordinates()">
</div>
<br/>

<br/>

function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}

function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>

<p>javascript画的线条</p>
<canvas id = "mycanvas2" width = "200" height = "100" style = "border:1px solid #CCC">your browser does not support the canvas element.</canvas>
<script type="text/javascript">
/**画线条**/
var c = document.getElementById("mycanvas2");
var cxt = c.getContext("2d");

cxt.moveTo(10,10);//将画笔移动到（10,10）
cxt.lineTo(150,50);//用笔画线到（150,50）
cxt.lineTo(10,50);//用笔画线到（10,50）

cxt.stroke();//显示线条
</script>

<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.fillStyle="#FF0000";//圆的填充色；

cxt.arc(70,18,15,0,Math.PI*2,true);//

cxt.fill();
/**
【画圆，Math.PI 函数的应用。cxt.arc(100,100,30,0,Math.PI*2,true); 括号内第一个和第二个参数，代表圆心坐标。第三个参数是圆的半径。第四个参数代表圆周起始位置。0 PI就是起始位置。沿顺时针路线，分别是0.5 PI（正下方），1 PI和1.5 PI（正上方），为画饼图提供了扇形范围的依据。第五个参数是弧长Math.PI*2就是整个圆，Math.PI是半圆。第六个参数是一个布尔值，true是顺时针false是逆时针。】
**/
</script>