canvasjs图片（canvas绘制一张图片）

发布时间：2023-12-08

canvasjs图片（canvas绘制一张图片）

更新：2022-11-14 02:22

本文目录一览：

  1. 用HTML5中canvas加js代码把下面这张图片绘制出釆
  2. 为什么我用js创建的image在canvas里显示不出来？
  3. HTML5、JS的canvas绘制图片的问题。。
  4. javascript 怎么把多幅图片画进canvas中，并且能拖动他们，给他们连线
  5. javascript canvas 如何对图片进行绕中心点旋转
  6. js canvas 旋转图片问题！

用HTML5中canvas加js代码把下面这张图片绘制出釆

您好，我来为您解答： 本身他是按像素的方式渲染，所以你就1px的空心圆形，太小了，边缘会出现模糊，如果圆画大一点情况就会消失。或者你可以先平移下坐标，让你的中心坐标点是整数，再试看看。 希望我的回答对你有帮助。

为什么我用js创建的image在canvas里显示不出来？

你好，当Image对象的src被设置后，图片才开始被加载到网页缓存数据中，全部加载完成以后Image对象触发onload事件回调。如果直接设置完src属性后立即使用drawImage去读取图片数据，那么图片尚未加载完成（此时是读不到的）。因此你需要给image.onload属性设置一个回调函数，在这个函数里绘制canvas。

HTML5、JS的canvas绘制图片的问题。。

按照你的描述，估计你之前的代码有调用过 ctx.scale 或者 ctx.transform 函数，导致坐标轴被缩放了。 建议找到对应的缩放调用，合理使用 ctx.save 和 ctx.restore 函数，来避免上下文环境污染

javascript 怎么把多幅图片画进canvas中，并且能拖动他们，给他们连线

canvas不可以拖动。你也不可以直接拖动canvas里面的任何元素，包括已经载入的图片（实际上图片已经成为canvas的一部分）。先不说连线，因为我不清楚你要怎样连线。先拿一张图片来说。 思路：canvas不可以拖动，但div可以啊。考虑div和canvas。位置属性设置为absolute，否则容易出错。 注意：将div的z-index值设置大点，保证其在Canvas画面之上。 将div的大小设置成图片的大小。 图片不是在div里面，也没必要。 拖动div，拖动到新位置X1,Y1时，清除canvas的图片：ctx.clearRect(X,Y,W,H); X是上一个位置图片在canvas中的横坐标，Y是上一个位置的纵坐标，W是图片宽度，H是图片高度。 绘制新位置下的图片：ctx.drawImage(img,X,Y); img是一个图片节点。不会用drawImage请百度哈。 【【【具体代码：】】】 div拖动：

var divObj = document.getElementById("cover");
var moveFlag = false;
divObj.onmousedown = function(e) {
  moveFlag = true;
  var clickEvent = window.event || e;
  var mwidth = clickEvent.clientX - divObj.offsetLeft;
  var mheight = clickEvent.clientY - divObj.offsetTop;
  document.onmousemove = function(e) {
    var moveEvent = window.event || e;
    if (moveFlag) {
      divObj.style.left = moveEvent.clientX - mwidth + "px";
      divObj.style.top = moveEvent.clientY - mheight + "px";
      divObj.onmouseup = function() {
        moveFlag = false;
      }
    }
  }
};

来解读下这段代码：首先获取div对象，设置拖拽标志moveFlage,当onmousedown时为true表示可以拖动，当onmouseup时为false表示不能拖动了。

var clickEvent = window.event || e;
var mwidth = clickEvent.clientX - divObj.offsetLeft;
var mheight = clickEvent.clientY - divObj.offsetTop;

这三行代码是为了修正光标位置。当点击时，记录下光标在div上的位置。mwidth和mheight表示光标落点相对于div左边和上边的距离。 接下来绘制图片： 首先定义全局变量X和Y，它们是为了实时更新图像的绘制坐标。

var ctx = document.getElementById("myCanvas").getContext("2d");
var img = document.getElementById("myImg");
function drawImg() {
  ctx.clearRect(0, 0, 1000, 500);
  ctx.beginPath();
  ctx.drawImage(img, X, Y);
  ctx.closePath();
  ctx.stroke();
}
window.onload = function() {
  setInterval(drawImg, 1);
}

获取“画笔”，获取图片对象。这里setInterval循环执行绘制图片的函数，以刷新图片的位置，setInterval的间隔值越小，拖拽起来越“流畅”。 同时别忘了clearRect，当图片移动到下一个位置时，清除上一个位置的图片，参数为Canvas画布的坐标和尺寸。 在拖拽时将修正后的光标坐标传给X、Y：

X = moveEvent.clientX - mwidth;
Y = moveEvent.clientY - mheight;

最后加上div和图像的活动范围：

if (moveEvent.clientX <= mwidth) {
  divObj.style.left = 0 + "px";
  X = 0;
}
if (parseInt(divObj.style.left) + divObj.offsetWidth >= 1000) {
  divObj.style.left = 1000 - divObj.offsetWidth + "px";
  X = 1000 - divObj.offsetWidth;
}
if (moveEvent.clientY <= mheight) {
  divObj.style.top = 0 + "px";
  Y = 0;
}
if (parseInt(divObj.style.top) + divObj.offsetHeight >= 500) {
  divObj.style.top = 500 - divObj.offsetHeight + "px";
  Y = 500 - divObj.offsetHeight;
}

这个就看个人的要求了，注意是要同时限定div和图片的活动范围。1000与500为本例的画布大小，如果是在整个页面里活动就换成innerWidth或innerHeight。 彻底隐藏div看看效果： 最后说下点击事件，这里要注意的是在拖拽的过程中onmousedown与onmouseup二者就构成了一个click过程，但我们不希望在拖拽结束后触发点击事件。 这里有个比较简单的办法，定义一个clickFlag默认为false,当onmousedown时设为true，若进行了onmousemove事件时设为false。 在最后onmouseup时判断clickFlag的值，为true时才触发点击事件。也就是说当你按下鼠标时，只有不发现移动，松开鼠标时才会触发点击事件。

javascript canvas 如何对图片进行绕中心点旋转

给你一个旋转的demo:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br/>
<input type="text" id="angle_v" readonly="1"/>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.translate(100,45)
//ctx.rotate(70*Math.PI/180);
//ctx.fillRect(-50,-25,100,50);
var angle = 10;
var angle_now = 0;
myRotate()
function myRotate() {
  ctx.clearRect(-100,-50,200,100); //x2 是为了把原来的图全部抹掉（不留下痕迹）
  ctx.rotate(angle * Math.PI / 180);
  ctx.fillRect(-50,-25,100,50);
  angle_now = (angle_now + angle) % 360;
  document.getElementById("angle_v").value = "当前角度:" + angle_now;
  setTimeout(myRotate, 1000);
}
</script>
</body>
</html>

注意：用roate实现旋转，重点在于改变坐标中心点 : ctx.translate(100,45) 坐标中心点计算公式：x = 左上角x + 宽度/2
y = 左上角y + 高度/2
然后translate到(x,y)即可，之后调用rotate进行旋转。 旋转之后填充时注意：ctx.fillRect(-50,-25,100,50);
x = - 宽度/2
y = -高度/2
fillRect(x,y,宽度，高度) 你的例子，代码控制比较看不懂。。。，所以没在基础上整改。 补充一个参考网站（英文的）： （如果有帮助，望采纳，谢谢）

js canvas 旋转图片问题！

所有绘图动作都是在一瞬间完成的，然后立刻就被restore了，当然看不到任何效果咯。如果想让整个过程像动画片一样慢慢展示给你看，那就要用js代码结合延时技术才行。

推荐文章