![](/img/trans.png)
[英]Is clearing canvas [ 2D Context ] in HTML5 necessary for good performance?
[英]Clearing context in canvas html5
我想在画布上绘制照片,并允许用户在其上拖动一个圆。 我有能力做到 问题是当我清除上下文时,我绘制的图像不见了(请参见此处: 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
。 这样,每次清除画布时,图像都会再次绘制。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.