html5 - canvas制作圆形，出来的是椭圆-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html5 - canvas制作圆形，出来的是椭圆

迷茫 2017-04-17 14:28:10

[HTML讨论组]

558

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas绘制时钟</title>
    <style>
        p{
            text-align: center;
            margin-top: 250px;
        }
        #clock{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <p>
        <canvas style="width:200px ;height:200px" id="clock"></canvas>
    </p>
    <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

迷茫

业精于勤，荒于嬉;行成于思，毁于随。

全部回复(2)

怪我咯2017-04-17 14:30:10 2楼

<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的尺寸与初始画布的比例不一致，它会出现扭曲。