在画布上绘制的图片不会显示在Google Chrome中 [英] Image drawn on canvas not displayed in Google Chrome
本文介绍了在画布上绘制的图片不会显示在Google Chrome中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下代码与3个画布完美无瑕地使用最新的IE和Mozilla FireFox。第三个画布（＃drawingSurface3）在Google Chrome上失败，在开发人员控制台中没有任何错误。即使没有绘制线条。
<！doctype html>
< html>
< head>
< title>在画布中绘制线条< / title>
< style>
canvas {
border：1px solid #ccc;
}
< / style>
< / head>
< body>
< canvas id =drawingSurfacewidth =300height =300>
< p>您的浏览器不支持canvas元素。< / p>
< / canvas>
< br />
< canvas id =drawingSurface2width =300height =300>
< p>您的浏览器不支持canvas元素。< / p>
< / canvas>
< br />
< canvas id =drawingSurface3width =300height =300>
< p>您的浏览器不支持canvas元素。< / 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>
解决方案
停用加速2D画布解决了问题：
选项：
禁用加速2D画布Mac，Windows，Linux，Chrome OS
禁用GPU来执行2D画布渲染，而是使用软件渲染。 b $ b
The following code with the 3 canvases works flawlessly with the latest IE and Mozilla FireFox. The third canvas (#drawingSurface3) fails on Google Chrome without any errors in the developer console. Even the lines are not drawn.
<!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>
解决方案
I started fooling around in chrome://flags/
Disabling accelerated 2D canvas fixed the issue:
Option:
Disable accelerated 2D canvas Mac, Windows, Linux, Chrome OS Disables the use of the GPU to perform 2d canvas rendering and instead uses software rendering.
这篇关于在画布上绘制的图片不会显示在Google Chrome中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
