时间戳

首页 > 解决方案 > 画布在我的网站上以错误的方式绘制

javascript - 画布在我的网站上以错误的方式绘制

问题描述

我的画布绘图有问题，这是我按照 W3school 绘制时钟的代码，但是当我在我的网站上编码时，它的绘制方式错误。我不知道为什么......

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = 75;

ctx.translate(radius, radius);

radius = radius * 0.90

drawClock();

function drawClock() {
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  
  ctx.fillStyle = "white";
  ctx.fill();
}
#canvas {
  width: 15vw;
  height: 15vw;
  background-color: red;
  position: fixed;
  left: 80%;
  top: 50px;
}
<canvas id="canvas"></canvas>

图像

标签： javascriptcss

解决方案

你需要从.arc中心开始。此外，您必须使用canvasElement.width =或设置画布本身的宽度和高度<canvas>，而不是使用 CSS 或canvasElement.style.width =：

var canvas = document.getElementById('can'), ctx = canvas.getContext('2d'), sz = 75;
ctx.fillStyle = '#fff'; ctx.arc(sz, sz, sz, 0, Math.PI*2); ctx.fill();
canvas{
  background:#f00;
}
<canvas width='150' height='150' id='can'></canvas>

推荐阅读