html5 - canvas制作圆形，出来的是椭圆
本文介绍了html5 - canvas制作圆形，出来的是椭圆的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!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的尺寸与初始画布的比例不一致，它会出现扭曲。
这篇关于html5 - canvas制作圆形，出来的是椭圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
