脚本宝典收集整理的这篇文章主要介绍了html 5画圆,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
如果要创建一个弧形的画布,我们可以使用 arc() 方法。
语法:arc(定义一个中心点,半径,起始角度,结束角度,和绘图方向:顺时针或逆时针)
代码:
JavaScript Code复制内容到剪贴板
context.arc(centerX, centerY, radius, startingAngle, endingAngle, anticlockwise);
HTML5 Canvas Arc 例子:
XML/HTML Code复制内容到剪贴板
<!DOCTYPE HTML>
<html>
<head>
<tITle>html5 canvas Arc</title>
<style>
body {margin: 0px;padding: 0px;}
#myCanvas {border: 1px solid #9C9898; margin:0 auto;margin-top:200px; margin-left:100px;}
</style> www.2cto.com
<script>
window.onload = function(){
VAR canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 288;
var centerY = 160;
var radius = 75;
var startingAngle = 1.1 * Math.PI;
var endingAngle = 1.9 * Math.PI;
var counterclockwise = false;
context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
context.lineWidth = 15;
context.strokeStyle = "black"; // line color
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200">
</canvas>
</body>
</html>
以上是脚本宝典为你收集整理的html 5画圆全部内容,希望文章能够帮你解决html 5画圆所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。