如何清除画布中的特定行：HTML5 [英] How to clear specific line in Canvas : HTML5
问题描述
我对这个Canvas元素完全陌生。我可以在画布上绘制线条，但不能仅清除特定线条。整体画布变成空白。
试过这个：
HTML：
< canvas id =cvswidth =400height =400>< / canvas>
< hr />
< input type =submitid =reDrowAvalue =Draw A/>
< input type =submitid =reDrowBvalue =Draw B/>
< hr />
< input type =submitid =clearAvalue =Clear A/>
< input type =submitid =clearBvalue =Clear B/>
脚本
< pre $ $（document）.ready（function（）{
canvas = document.getElementById（cvs）;
$（＃reDrowA）。 （click，function（）{
a = canvas.getContext（'2d'）;
a.translate（0.5，0.5）;
a.beginPath（）;
a.setLineDash（[2,10]）;
a.moveTo（10,10）;
a.lineTo（300,10）;
a.lineTo（300,300）; $ b （）; $ b $ $ bb = canvas.getContext（'2d'）; $ b a.stroke（）;
}）;
$（＃reDrowB）。 ;
b.translate（0.5，0.5）;
b.beginPath（）;
b.setLineDash（[2,10]）;
b.moveTo（10,10 ）;
b.lineTo（10,300）;
b.lineTo（300,300）;
b.stroke（）;
}）;
$（＃clearA ）.on（click，function（）{
a.clearRect（0，0，canvas.width，canvas.height）;
}）;
$（＃clearB ）.on（click，function（）{
b.clearR ect（0，0，canvas.width，canvas.height）;
}）;
}）;
小提琴： http://jsfiddle.net/8YNvu/
关于Canvas，Canvas'元素'和'元素'的可见性...
当画布上的任何元素需要更改（移动，擦除等）时，标准方法是完全擦除画布并用新元素重画画布（或者在元素被擦除时不重绘元素）。
这是因为画布确实不是记住它绘制了任何单个元素的位置，因此不能单独移动或擦除任何元素。
您需要记住关于元素重绘的足够信息它在画布被擦除后。
演示： http://jsfiddle.net/m1erickson/Wrk2e/
因此，在您的示例中，您可以创建crea te javascript对象 a 和 b 来表示您的右上和左下行路径。
每个对象都有定义其路线路径的点和一个表明它是否可见的标志（在画布上可见==重绘）。
//创建一个包含右上方行的对象
//对象包含其路径点&
var a = {
path：[10,10，300,10，300,300]，
isVisible：false，
}
//创建一个包含左下角线的对象
//该对象包含其路径点&
var b = {
path：[10,10，10,300，300,300]，
isVisible：false，
}
为了便于处理，您可以将所有行路径对象放在数组中：
//包含所有行路径对象的数组
var myObjects = [a，b];
然后，当您清除画布时，只需使用每个对象线路路径信息来重绘线条即可。如果一个特定的对象可见性标志是 false 那么不要重绘那个特定的对象。
//清除整个画布
//重绘任何可见的行路径
函数redrawAll（myObjects）{
context.clearRect（0,0，canvas.width， canvas.height）;
for（var i = 0; i< myObjects.length; i ++）{
if（myObjects [i] .isVisible）{
drawLinePath（myObjects [i]）;
$ b //重绘1行路径
函数drawLinePath（theObject）{
var points = theObject.path ;
//保存当前未翻译的上下文状态
context.save（）;
//通过对象路径中的每个点绘制线条
context.translate（0.5，0.5）;
context.beginPath（）;
context.setLineDash（[2,10]）;
context.moveTo（points [0]，points [1]）;
for（var i = 2; i context.lineTo（points [i]，points [i + 1]）;
}
context.stroke（）;
//将上下文恢复为未翻译状态
context.restore（）;
$ b 所有这一切都已经到位，您的按钮只需更改特定的可见性标志然后清除/重绘整个画布。
//使用按钮设置&清除对象上的可见性标志
//在所有情况下，清除整个画布并重绘任何可见对象
$ b $（＃reDrowA）。on（click，function（） {
a.isVisible = true;
redrawAll（myObjects）;
}）;
$（＃reDrowB）。on（click，function（）{
b.isVisible = true;
redrawAll（myObjects）;
}）; $（＃clearA）。on（click，function（）{
.isVisible = false;
redrawAll（myObjects）;
}）; $（＃clearB）。on（click，function（）{
b.isVisible = false;
redrawAll（myObjects）;
}）;
I am totally new to this Canvas Element. I am able to draw line in canvas, but not able to clear only specif line. Whole canvas become blank.
Tried this:
HTML:
<canvas id="cvs" width="400" height="400"></canvas>
<hr />
<input type="submit" id="reDrowA" value="Draw A" />
<input type="submit" id="reDrowB" value="Draw B" />
<hr />
<input type="submit" id="clearA" value="Clear A" />
<input type="submit" id="clearB" value="Clear B" />
Script
$(document).ready(function(){
canvas = document.getElementById("cvs");
$("#reDrowA").on("click",function(){
a = canvas.getContext('2d');
a.translate(0.5, 0.5);
a.beginPath();
a.setLineDash([2,10]);
a.moveTo(10,10);
a.lineTo(300,10);
a.lineTo(300,300);
a.stroke();
});
$("#reDrowB").on("click",function(){
b = canvas.getContext('2d');
b.translate(0.5, 0.5);
b.beginPath();
b.setLineDash([2,10]);
b.moveTo(10,10);
b.lineTo(10,300);
b.lineTo(300,300);
b.stroke();
});
$("#clearA").on("click",function(){
a.clearRect(0, 0, canvas.width, canvas.height);
});
$("#clearB").on("click",function(){
b.clearRect(0, 0, canvas.width, canvas.height);
});
});
Fiddle: http://jsfiddle.net/8YNvu/
解决方案 About Canvas, Canvas 'elements', and the visibility of `elements' ...
When any element on the canvas needs to change (move, erase, etc), the standard method is to completely erase the canvas and redraw the canvas with the elements in their new positions (or not redraw the elements if they are erased).
That's because canvas does not "remember" where it drew any individual element and therefore cannot individually move or erase any element.
It's up to you to "remember" enough information about an element to redraw it after the canvas has been erased.
A Demo: http://jsfiddle.net/m1erickson/Wrk2e/
So in your example you could create javascript objects a and b to represent your top-right and left-bottom line paths.
Each object would have the points which define its line-path and a flag indicating if it is visible (visible == redrawn on the canvas).
// create an object containing the top-right lines
// the object contains its path points & if it is visible or not
var a={
path:[10,10, 300,10, 300,300],
isVisible:false,
}
// create an object containing the left-bottom lines
// the object contains its path points & if it is visible or not
var b={
path:[10,10, 10,300, 300,300],
isVisible:false,
}
For easy processing you can put all your line-path objects in an array:
// an array containing all the line-path objects
var myObjects=[a,b];
Then when you clear the canvas you simply use each objects line-path information to redraw the line. If a particular objects visibility flag is false then don't redraw that particular object.
// clear the entire canvas
// redraw any line-paths that are visible
function redrawAll(myObjects){
context.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<myObjects.length;i++){
if(myObjects[i].isVisible){
drawLinePath(myObjects[i]);
}
}
}
// redraw 1 line-path
function drawLinePath(theObject){
var points=theObject.path;
// save the current untranslated context state
context.save();
// draw lines through each point in the objects path
context.translate(0.5, 0.5);
context.beginPath();
context.setLineDash([2,10]);
context.moveTo(points[0],points[1]);
for(var i=2;i<points.length;i+=2){
context.lineTo(points[i],points[i+1]);
}
context.stroke();
// restore the context to its untranslated state
context.restore();
}
With all this in place, your buttons simply change the visibility flag on a particular line-path object and then clear/redraw the entire canvas.
// use buttons to set & clear the visibility flags on objects
// In all cases, clear the entire canvas and redraw any visible objects
$("#reDrowA").on("click",function(){
a.isVisible=true;
redrawAll(myObjects);
});
$("#reDrowB").on("click",function(){
b.isVisible=true;
redrawAll(myObjects);
});
$("#clearA").on("click",function(){
a.isVisible=false;
redrawAll(myObjects);
});
$("#clearB").on("click",function(){
b.isVisible=false;
redrawAll(myObjects);
});
这篇关于如何清除画布中的特定行：HTML5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
