html 5 画布,画线条,画圆

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

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

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

<div id = "xycoordinates"></div>

<br/>

<br/>

<script type="text/javascript">

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>









评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值