IT学习联盟

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
IT学习联盟 门户 文章 HTML 5 查看内容

html 5画圆

2012-8-18 17:13| 发布者: admin| 查看: 535| 评论: 0

如果要创建一个弧形的画布,我们可以使用 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>   


Archiver|IT学习联盟| 网站地图

Powered by Discuz! X2.5© 2001-2010 世界学习室 大伟制作

GMT+8, 2018-5-23 20:37 , Processed in 0.105096 second(s), 12 queries .