Javascript 保存对html画布路径的引用
我正在编写一些代码，这些代码正在绘制到画布上。代码的一部分在画布上绘制了一些线条。这些行的位置和颜色不会改变，但它们通常需要重新绘制，因为其他代码可能会影响它们（例如：在其顶部绘制） 可以绘制几百条线，在这些情况下，分析显示绘制大约需要200毫秒，因此我希望对此进行一些优化 我注意到的一件事是，在画布上绘制时，基本上是向路径添加点，然后一旦准备好，就可以填充或笔划该路径。尽管画布上的像素已经过时，但如果我能够保留对路径的引用，那么更新将与重新绘制先前构建的路径一样简单 我的问题是：你到底是如何得到路径对象的？ fill和stroke方法似乎是，规范定义了，但我似乎在任何地方都找不到实际的Javascript 保存对html画布路径的引用,javascript,html,canvas,Javascript,Html,Canvas,我正在编写一些代码，这些代码正在绘制到画布上。代码的一部分在画布上绘制了一些线条。这些行的位置和颜色不会改变，但它们通常需要重新绘制，因为其他代码可能会影响它们（例如：在其顶部绘制） 可以绘制几百条线，在这些情况下，分析显示绘制大约需要200毫秒，因此我希望对此进行一些优化 我注意到的一件事是，在画布上绘制时，基本上是向路径添加点，然后一旦准备好，就可以填充或笔划该路径。尽管画布上的像素已经过时，但如果我能够保留对路径的引用，那么更新将与重新绘制先前构建的路径一样简单 我的问题是：你到底是如何得
路径类
所以，简单回顾一下：
我有这样的想法：
function update() {
context.beginPath();
// lots of lines added to the default path...
context.moveTo(x1, y1); context.lineTo(somewhere, else);
context.moveTo(x2, y2); context.lineTo(somewhere, else);
context.stroke();
}
function update() {
if (!this.path) {
this.path = new Path(); // <-- here's the magic
this.path.moveTo(x1, y2); this.path.lineTo(somewhere, else); // etc
}
this.path.stroke();
}
我想要的是这样的：
function update() {
context.beginPath();
// lots of lines added to the default path...
context.moveTo(x1, y1); context.lineTo(somewhere, else);
context.moveTo(x2, y2); context.lineTo(somewhere, else);
context.stroke();
}
function update() {
if (!this.path) {
this.path = new Path(); // <-- here's the magic
this.path.moveTo(x1, y2); this.path.lineTo(somewhere, else); // etc
}
this.path.stroke();
}
函数更新（）{
如果（！this.path）{
this.path=new path（）；//事实证明，根据这个博客（日期2013年1月24日）的说法，只是还没有浏览器支持它。他们的画布中没有路径支持，但是为什么不使用svg行并将其zIndex设置在其他的之上呢。没有一个画布绘图API允许您保存对对象的引用。
画布允许您在位图中绘制像素，而不是像SVG那样创建和操作对象
如果您希望优化性能，并且希望反复使用相同的路径，则可能希望在单独的画布项目中绘制一次，然后使用drawImage（可以将画布作为参数）将该画布绘制到其他画布中.canvas规范调用的路径对象尚未在浏览器中实现
顺便说一句，当实现时，Path对象与context.isPointInPath（myPath）结合在一起时，将在命中测试中非常有用；总有一天
以下是如何创建自己的路径对象，直到浏览器赶上：
- 创建包含绘制路径笔划的画布的JS对象
- 如果要执行myPath.stroke（），请使用myVisibleContext.drawImage（myPath.context，0,0）将路径的画布“blit”到绘图画布上
演示：
代码：
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
function Path(maxWidth,maxHeight,color,linewidth,drawingContext){
this.width=maxWidth;
this.height=maxHeight;
this.drawingCtx=drawingContext;
this.points=[]
this.canvas=document.createElement("canvas");
this.canvas.width=maxWidth;
this.canvas.height=maxHeight;
this.ctx=this.canvas.getContext("2d");
this.ctx.strokeStyle=color;
this.ctx.lineWidth=linewidth;
this.lastX;
this.lastY;
}
Path.prototype.moveTo=function(x,y){
this.lastX=x;
this.lastY=y;
}
Path.prototype.lineTo=function(x,y){
this.ctx.moveTo(this.lastX,this.lastY);
this.ctx.lineTo(x,y);
this.ctx.stroke();
this.lastX=x;
this.lastY=y;
}
Path.prototype.stroke=function(){
this.drawingCtx.drawImage(this.canvas,0,0);
}
// create a new path object
var p=new Path(300,300,"blue",2,ctx);
// set the Path's drawing commands
p.moveTo(69,91);
p.lineTo(250,150);
p.moveTo(69,208);
p.lineTo(180,54);
p.lineTo(180,245);
p.lineTo(69,91);
p.moveTo(69,208);
p.lineTo(250,150);
// draw the Path.canvas to the drawing canvas
p.stroke();
// tests...
$("#stroke").click(function(){
p.stroke();
});
$("#erase").click(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
});
}); // end $(function(){});
</script>
</head>
<body>
<button id="stroke">Path.stroke</button><br>
<button id="erase">Erase main canvas</button><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
正文{背景色：象牙；}
#画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
函数路径（maxWidth、maxHeight、颜色、线宽、drawingContext）{
这个.width=maxWidth；
这个.height=maxHeight；
this.drawingCtx=drawingContext；
this.points=[]
this.canvas=document.createElement（“canvas”）；
this.canvas.width=maxWidth；
this.canvas.height=maxHeight；
this.ctx=this.canvas.getContext（“2d”）；
this.ctx.strokeStyle=颜色；
this.ctx.lineWidth=线宽；
这是lastX；
这是整形术；
}
Path.prototype.moveTo=函数（x，y）{
这个。lastX=x；
这个.lastY=y；
}
Path.prototype.lineTo=函数（x，y）{
this.ctx.moveTo（this.lastX，this.lastY）；
这个.ctx.lineTo（x，y）；
这个.ctx.stroke（）；
这个。lastX=x；
这个.lastY=y；
}
Path.prototype.stroke=函数（）{
this.drawingCtx.drawImage（this.canvas，0,0）；
}
//创建新的路径对象
var p=新路径（300300，“蓝色”，2，ctx）；
//设置路径的绘图命令
p、 moveTo（69,91）；
p、 lineTo（250150）；
p、 移动到（69208）；
p、 lineTo（180,54）；
p、 lineTo（180245）；
p、 lineTo（69,91）；
p、 移动到（69208）；
p、 lineTo（250150）；
//将Path.canvas绘制到绘图画布
p、 笔划（）；
//测试。。。
$（“#笔划”）。单击（函数（）{
p、 笔划（）；
});
$（“#擦除”）。单击（函数（）{
clearRect（0,0，canvas.width，canvas.height）；
});
})；//end$（函数（）{}）；
路径笔划
擦除主画布
好吧，画布绘图规范实际上提供了对向量对象的引用（）但显然，没有一个浏览器暴露了这一点。路径对象现在可以在Chrome Canary中使用。很快就可以在常规Chrome中使用。@Ken想到路径对象可以在浏览器中使用，我脸上挂着大大的笑容！！！！Chrome Canary现在支持路径，并且很快就会在常规Chrome中使用（除非他们改变主意）。