我想在 Canvas 上绘制一张照片并允许用户在其上拖动一个圆圈。我能做到。问题是当我清除上下文时,我绘制的图像消失了(请参见此处: http://jsfiddle.net/wL0ossth/ ),如果不清除上下文,整个图像将被彩色圆圈填充(请参见此处: http://jsfiddle.net/wL0ossth/1/ )。一些代码:
<canvas id="canvas" width=300 height=300></canvas>
<img id="scream" src="http://i10.dainikbhaskar.com/thumbnail/655x588/web2images/www.bhaskar.com/2014/11/25/2324_bus.jpg" alt="The Scream" width="220" height="277">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
JavaScript: ' http://jsfiddle.net/wL0ossth/1/
var c=document.getElementById("canvas");
var img=document.getElementById("scream");
var ctx=c.getContext("2d");
ctx.drawImage(img,10,10);
canvas.addEventListener('mousemove', followMouse, false);
function findOffset(obj) {
var curX = curY = 0;
if (obj.offsetParent) {
do {
curX += obj.offsetLeft;
curY += obj.offsetTop;
} while (obj = obj.offsetParent);
return {x:curX,y:curY};
}
}
function followMouse(e){
ctx.beginPath();
var offset = findOffset(canvas); //get the offset of the canvas relative to the page
var posX = e.pageX - offset.x; //find the x position of the mouse
var posY = e.pageY - offset.y; //find the y position of the mouse
ctx.arc(posX,posY,50,0,Math.PI*2,false); //draw a circle
ctx.fill();
}
编辑:我想让圆圈随着我绘制的图像一起移动,并具有清晰的上下文。简而言之,就是一个在http://jsfiddle.net/wL0ossth/1/中绘制的路径中不留下黑色痕迹的圆圈。
最佳答案
我认为你想要这样的东西(尽管我不确定,除非你稍微澄清一下你的帖子):
$(document).ready(function() {
var c = document.getElementById("canvas");
var img = document.getElementById("scream");
var ctx = c.getContext("2d");
canvas.addEventListener('mousemove', followMouse, false);
function findOffset(obj) {
var curX = 0,
curY = 0;
if (obj.offsetParent) {
do {
curX += obj.offsetLeft;
curY += obj.offsetTop;
} while (obj = obj.offsetParent);
return {
x: curX,
y: curY
};
}
}
function followMouse(e) {
ctx.clearRect(0, 0, 300, 300);
ctx.drawImage(img, 10, 10); // Notice I moved the image down to here
ctx.beginPath();
var offset = findOffset(canvas); //get the offset of the canvas relative to the page
var posX = e.pageX - offset.x; //find the x position of the mouse
var posY = e.pageY - offset.y; //find the y position of the mouse
ctx.arc(posX, posY, 50, 0, Math.PI * 2, false); //draw a circle
ctx.fill();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width=300 height=300></canvas>
<img id="scream" src="http://i10.dainikbhaskar.com/thumbnail/655x588/web2images/www.bhaskar.com/2014/11/25/2324_bus.jpg" alt="The Scream" width="220" height="277">
您需要做的是将drawImage(img)
放在clearRect
之后。这样,每次清除 Canvas 时,都会重新绘制图像。
关于javascript - 清除canvas html5中的上下文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27135938/