canvas制作圆形,出来的是椭圆

2016/12 14 13:12
此文章不得转载,如有需要请联系网站管理员。

一度的温暖,一百度的爱情,来自于www.ca788.com的点点滴滴

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas绘制时钟</title>
    <style>
        div{
            text-align: center;
            margin-top: 250px;
        }
        #clock{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div>
        <canvas style="width:200px ;height:200px" id="clock"></canvas>
    </div>
    <script type="text/javascript" src="js/clock.js"></script>
</body>
</html>
var dom=document.getElementById("clock");//获取canvas的id
var ctx=dom.getContext("2d");//获取上下文,HTML5不支持3d
var width=ctx.canvas.width;//
var height=ctx.canvas.height;
var r=width/2;

//定义一个办法画圆
function drawBackground(){
    ctx.save();
    //转换坐标
    ctx.translate(r,r);
    ctx.lineWidth=10;
    //获取途径
    ctx.beginPath();
    //画圆
    ctx.arc(0,0,r-5,0,2*Math.PI,false);
    //绘制以后途径
    ctx.stroke();
}
//实行办法
drawBackground();

代码如上,但是出来如下图,,,不解,,,有大神可以给表明一下吗??头一次学习canvas

<canvas width=200 height=200 id="clock"></canvas>

canvas那边改成如许子

https://developer.mozilla.org…

<canvas> 看起来和 <img> 元素很相像,独一的差别便是它并没有 src 和 alt 属性。实际上,<canvas> 标签只要两个属性—— width和height。这些都是可选的,并且异样使用 DOM properties 来设置。当没有设置宽度和高度的时分,canvas会初始化宽度为300像素和高度为150像素。该元素可以运用CSS来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:假如CSS的尺寸与初始画布的比例纷比方致,它会呈现歪曲。

use <canvas width="300" height="300" id="clock"></canvas> to specify the physical size of the canvas
or `dom.width=200;
dom.height=200;`

and don’t call it ‘dom’, it is a canvas element.

(看完/读完)这篇文章有何感想! 来看看www.ca788.com是怎么评论的吧!

--转载请注明: www.ca788.com#亚洲城ca788手机版官网 » canvas制作圆形,出来的是椭圆

发表评论

(必填)