Javascript 在画布上绘制的图像未显示在Google Chrome中
以下代码与3张画布完美地配合使用最新的IE和Mozilla FireFox。第三个画布（#drawingSurface3）在Google Chrome上失败，开发者控制台中没有任何错误。甚至连线都没有画出来Javascript 在画布上绘制的图像未显示在Google Chrome中,javascript,html,google-chrome,canvas,Javascript,Html,Google Chrome,Canvas,以下代码与3张画布完美地配合使用最新的IE和Mozilla FireFox。第三个画布（#drawingSurface3）在Google Chrome上失败，开发者控制台中没有任何错误。甚至连线都没有画出来 <!doctype html> <html> <head> <title>Drawing lines in Canvas</title> <style> c
<!doctype html>
<html>
<head>
<title>Drawing lines in Canvas</title>
<style>
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="drawingSurface" width="300" height="300">
<p>Your browser does not support the canvas element.</p>
</canvas>
<br />
<canvas id="drawingSurface2" width="300" height="300">
<p>Your browser does not support the canvas element.</p>
</canvas>
<br />
<canvas id="drawingSurface3" width="300" height="300">
<p>Your browser does not support the canvas element.</p>
</canvas>
<script src="scripts/modernzr 2-6-2.js"></script>
<script src="scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var canvas = document.getElementById("drawingSurface");
var ctx;
if (ctx = canvas.getContext("2d")) {
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(75, 100);
ctx.lineTo(25, 100);
// ctx.stroke();
ctx.closePath();
ctx.stroke();
// ctx.fill();
}
var canvas2 = document.getElementById("drawingSurface2");
if (canvas2 && (ctx = canvas2.getContext("2d"))) {
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(100, 300);
ctx.lineTo(150, 300);
ctx.lineTo(150, 155);
ctx.lineTo(205, 155);
ctx.lineTo(205, 100);
ctx.closePath();
ctx.fillStyle = "#0099ff";
ctx.fill();
ctx.lineWidth = 6;
ctx.lineJoin = "round";
ctx.strokeStyle = "#cccccc";
ctx.stroke();
}
var canvas3 = document.getElementById("drawingSurface3");
if (canvas3 && (ctx = canvas3.getContext("2d"))) {
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0);
//alert(ctx.getImageData());
ctx.beginPath();
ctx.moveTo(100, 125);
ctx.lineTo(150, 285);
ctx.lineTo(200, 233);
ctx.lineTo(250, 368);
ctx.lineTo(300, 402);
ctx.lineTo(350, 300);
ctx.lineTo(400, 90);
//ctx.closePath();
ctx.stroke();
};
img.src = "images/chartBackground.png";
}
});
</script>
</body>
</html>
在画布上画线
帆布{
边框：1px实心#ccc；
}
您的浏览器不支持画布元素
您的浏览器不支持画布元素
您的浏览器不支持画布元素
$（文档）.ready（函数（）{
var canvas=document.getElementById（“drawingSurface”）；
var-ctx；
if（ctx=canvas.getContext（“2d”））{
ctx.beginPath（）；
ctx.moveTo（75,50）；
ctx.lineTo（75100）；
ctx.lineTo（25100）；
//ctx.stroke（）；
ctx.closePath（）；
ctx.stroke（）；
//ctx.fill（）；
}
var canvas2=document.getElementById（“drawingSurface2”）；
if（canvas2&（ctx=canvas2.getContext（“2d”））{
ctx.beginPath（）；
ctx.moveTo（100100）；
ctx.lineTo（100300）；
ctx.lineTo（150300）；
ctx.lineTo（150155）；
ctx.lineTo（205155）；
ctx.lineTo（205100）；
ctx.closePath（）；
ctx.fillStyle=“#0099ff”；
ctx.fill（）；
ctx.lineWidth=6；
ctx.lineJoin=“圆形”；
ctx.strokeStyle=“#CCCC”；
ctx.stroke（）；
}
var canvas3=document.getElementById（“drawingSurface3”）；
if（canvas3&（ctx=canvas3.getContext（“2d”））{
var img=新图像（）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
//警报（ctx.getImageData（））；
ctx.beginPath（）；
ctx.moveTo（100125）；
ctx.lineTo（150285）；
ctx.lineTo（200233）；
ctx.lineTo（250368）；
ctx.lineTo（300402）；
ctx.lineTo（350300）；
ctx.lineTo（400,90）；
//ctx.closePath（）；
ctx.stroke（）；
};
img.src=“images/chartBackground.png”；
}
});
禁用使用GPU执行2d画布渲染，而是使用软件渲染。我开始在chrome://flags/ 禁用加速二维画布修复了以下问题： 选项： 禁用Mac、Windows、Linux和Chrome操作系统的加速2D画布
禁用使用GPU执行2d画布渲染，而是使用软件渲染。这对我来说很好。你确定加载了“images/chartBackground.png”吗？@Gael-Chrome“Network”开发工具选项卡将其标识为已加载。当“alert（ctx.getImageData（））；”未被注释时，你是否有一个警报？对我来说效果很好。是否确实加载了“images/chartBackground.png”？@Gael Chrome“Network”开发工具选项卡将其标识为已加载。未注释“alert（ctx.getImageData（））；”时，您是否有警报？