Google chrome 非常简单的画布绘制在Fx中工作，而不是在Chrome中
我被显示，这是一个修改 它在FX10中工作得非常好，但在Chrome中却一点也不好 通过交换offsetX和layerX，我消除了Chrome关于不推荐使用的event.layerX/Y的警告，但它仍然没有绘制 一定很简单。Google chrome 非常简单的画布绘制在Fx中工作，而不是在Chrome中,google-chrome,canvas,Google Chrome,Canvas,我被显示，这是一个修改 它在FX10中工作得非常好，但在Chrome中却一点也不好 通过交换offsetX和layerX，我消除了Chrome关于不推荐使用的event.layerX/Y的警告，但它仍然没有绘制 一定很简单。 更新：它是-注释了两个context.moveTo（ev.\ux，ev.\uy）成功了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">
更新：它是-注释了两个
context.moveTo（ev.\ux，ev.\uy）成功了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Paint</title>
<style type="text/css"><!--
#container { position: relative; }
#imageView { border: 1px solid #000; }
--></style>
</head>
<body BGCOLOR="#CCFFFF">
<div id="container">
<canvas id="imageView" width="700" height="643" margin: 0 auto>
<p>Unfortunately, your browser is currently unsupported by our web
application. We are sorry for the inconvenience. Please use one of the
supported browsers listed below, or draw the image you want using an
offline tool.</p>
<p>Supported browsers: <a href="http://www.opera.com">Opera</a>, <a
href="http://www.mozilla.com">Firefox</a>, <a
href="http://www.apple.com/safari">Safari</a>, and <a
href="http://www.konqueror.org">Konqueror</a>.</p>
</canvas>
</div>
<script type="text/javascript">
/* © 2009 ROBO Design
* http://www.robodesign.ro
*/
// Keep everything in anonymous function, called on window load.
if(window.addEventListener) {
window.addEventListener('load', function () {
var canvas, context, tool;
function init () {
// Find the canvas element.
canvas = document.getElementById('imageView');
if (!canvas) {
alert('Error: I cannot find the canvas element!');
return;
}
if (!canvas.getContext) {
alert('Error: no canvas.getContext!');
return;
}
// Get the 2D canvas context.
context = canvas.getContext('2d');
if (!context) {
alert('Error: failed to getContext!');
return;
}
var img=new Image();
img.onload = function(){
context.drawImage(img,0,0);
};
img.src=" PainDiagram.png";
// Pencil tool instance.
tool = new tool_pencil();
// Attach the mousedown, mousemove and mouseup event listeners.
canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup', ev_canvas, false);
}
// This painting tool works like a drawing pencil which tracks the mouse
// movements.
function tool_pencil () {
var tool = this;
this.started = false;
// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
context.beginPath();
context.lineWidth = 5;
context.lineCap = "round";
context.globalAlpha=0.01;
context.shadowColor="red";
context.shadowBlur=10;
context.strokeStyle = "red"; // line color
context.moveTo(ev._x, ev._y);
tool.started = true;
};
// This function is called every time you move the mouse. Obviously, it only
// draws if the tool.started state is set to true (when you are holding down
// the mouse button).
this.mousemove = function (ev) {
if (tool.started) {
//var p = context.getImageData(ev._x, ev._y, 1, 1).data;
//if(p[0]==255 && p[1]==204 && p[2]==153){
context.moveTo(ev._x, ev._y);
context.lineTo(ev._x, ev._y);
context.stroke();
//}
}
};
// This is called when you release the mouse button.
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
}
};
}
// The general-purpose event handler. This function just determines the mouse
// position relative to the canvas element.
function ev_canvas (ev) {
if (ev.offsetX || ev.offsetX == 0) { // Opera and WebKit
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
else if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
}
// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
func(ev);
}
}
init();
}, false); }
// vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix:
</script>
</body>
</html>
油漆
很遗憾，我们的网站目前不支持您的浏览器
应用给您带来不便，我们深表歉意。请使用其中一个
下面列出了支持的浏览器，或者使用
离线工具
支持的浏览器：、和
/*©2009机器人设计
* http://www.robodesign.ro
*/
//将所有内容保留在匿名函数中，在窗口加载时调用。
if（window.addEventListener）{
window.addEventListener（'load'，函数（）{
var画布、上下文、工具；
函数init（）{
//找到canvas元素。
canvas=document.getElementById（'imageView'）；
如果（！画布）{
警报（'错误：我找不到画布元素！'）；
返回；
}
如果（！canvas.getContext）{
警报（'Error:no canvas.getContext！'）；
返回；
}
//获取2D画布上下文。
context=canvas.getContext（'2d'）；
如果（！上下文）{
警报（'错误：获取上下文失败！'）；
返回；
}
var img=新图像（）；
img.onload=函数（）{
背景图像（img，0,0）；
};
img.src=“PainDiagram.png”；
//铅笔工具实例。
工具=新工具_铅笔（）；
//附加mousedown、mousemove和mouseup事件侦听器。
canvas.addEventListener（'mousedown'，ev_canvas，false）；
canvas.addEventListener（'mousemove'，ev_canvas，false）；
canvas.addEventListener（'mouseup'，ev_canvas，false）；
}
//这个绘画工具的工作原理就像一支追踪鼠标的画笔
//动作。
功能工具_铅笔（）{
var工具=这个；
this.start=false；
//当您开始按住鼠标按钮时，将调用此选项。
//这是铅笔画的开始。
this.mousedown=函数（ev）{
context.beginPath（）；
context.lineWidth=5；
context.lineCap=“round”；
context.globalAlpha=0.01；
context.shadowColor=“红色”；
背景。阴影模糊=10；
context.strokeStyle=“red”；//线条颜色
上下文移动到（ev.\ux，ev.\uy）；
tool.started=true；
};
//每次移动鼠标时都会调用此函数。显然，它仅
//如果tool.started状态设置为true（按下时），则绘制
//鼠标按钮）。
this.mousemove=函数（ev）{
如果（工具启动）{
//var p=context.getImageData（ev.\ux，ev.\uy，1,1）.data；
//如果（p[0]==255&&p[1]==204&&p[2]==153）{
上下文移动到（ev.\ux，ev.\uy）；
上下文行（ev.\ux，ev.\uy）；
stroke（）；
//}
}
};
//当您释放鼠标按钮时，将调用此选项。
this.mouseup=函数（ev）{
如果（工具启动）{
工具。鼠标移动（ev）；
tool.start=false；
}
};
}
//通用事件处理程序。此函数仅确定鼠标
//相对于画布元素的位置。
功能ev_画布（ev）{
如果（ev.offsetX | | ev.offsetX==0）{//Opera和WebKit
ev._x=ev.offsetX；
ev._y=ev.offsetY；
}
else如果（ev.layerX | | ev.layerX==0）{//Firefox
ev._x=ev.layerX；
ev._y=ev.layerY；
}
//调用该工具的事件处理程序。
var func=工具[ev.type]；
if（func）{
func（ev）；
}
}
init（）；
}，假）；}
//vim:设置拼写spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix:
删除行context.moveTo（ev.\ux，ev.\uy）
来自此.mousemove
moveTo（）
方法创建一个新的子路径，因此您告诉画布将笔划应用于长度为零像素的路径。Firefox显然支持这一点。有关更多信息，请参阅。您刚刚错过了一笔赏金。谢谢没问题。很乐意帮忙！：）