{代码...} {代码...} 代码如上，但是出来如下图，，，不解，，，有大神可以给解释一下吗？？头一次学习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.

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

<!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

迷茫2771 Tage vor506

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

Antworte allen(2)Ich werde antworten