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

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

一度的温暖,一百度的爱情,来自于ca788亚洲城娱乐的点点滴滴

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

(看完/读完)这篇文章有何感想! 来看看ca788亚洲城娱乐是怎么评论的吧!

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

发表评论

(必填)