HTML5画布图案
[英]HTML5 canvas patterns
问题描述
我在文本编辑器上编写了以下代码：
!DOCTYPE html><html><head><script>
window.onload = function()
{
canvas = document.getElementById("canvasArea");
context = canvas.getContext("2d");
var smallIMage = new Image();
smallImage.src = "https://vignette.wikia.nocookie.net/cardfight/images/8/89/De.jpg/revision/latest?cb=20130414214050";
smallImage.onload = function()
{
context.shadowOffsetX = 4;
context.shadowOffsetY = 4;
context.shadowBlur = 20;
context.shadowColor = "lavender";
context.strokestyle = "gray";
context.lineWidth = 1;
var repeatPattern = context.createPattern(smallImage, "repeat");
var noRepeatPattern = context.createPattern(smallImage, "no-repeat");
var repeatXPattern = context.createPattern(smallImage, "repeat-x");
var repeatYPattern = context.createPattern(smallImage, "repeat-y");
context.fillStyle = repeatPattern;
context.fillRect (125, 125, 325, 325);
context.strokeRect (125, 125, 325, 325);
context.fillStyle = noRepeatPattern;
context.fillRect (0, 0, 100, 100);
context.strokeRect (0, 0, 100, 100);
context.fillStyle = repeatXPattern;
context.fillRect (125, 0, 350, 100);
context.strokeRect (125, 0, 350, 100);
context.fillStyle = repeatYPattern;
context.fillRect (0, 125, 100, 350);
context.strokeRect (0, 125, 100, 350);
}
}
</script></head><body>
<div style = "width:500px; height:500px;
margin:0 auto; padding:5px;">
<canvas id = "canvasArea"
width = "500" height = "500"
style = "border:2px solid black">
Your browser doesn't currently support HTML5 canvas.
</canvas>
</div>
</body>
</html>
可以使用此代码从在线图像创建图案，但是由于画布完全空白，因此未显示。 你能告诉我我做错了什么吗？
1 个解决方案
解决方案1
0 2018-02-11 04:50:32
除了纠正一些拼写不一致并在分配它的.src属性之前定义new Image()事件处理程序外，您的代码没有太多错误。 另外，请记住在文件的head部分声明文档的charset 。 例如..
<head>
<meta charset="utf-8">
... etc ...
</head>
无论如何，经过一些编辑后，页面的主要组件将如下所示。
document.addEventListener('DOMContentLoaded', function() { var canvas = document.getElementById("canvasArea"), ctx = canvas.getContext("2d"), smallImage = new Image(); /* set canvas dimensions */ canvas.width = canvas.height = 500; smallImage.addEventListener("load", function() { /* the image is bound to the function's 'this' property */ var repeatPattern = ctx.createPattern(this, "repeat"), noRepeatPattern = ctx.createPattern(this, "no-repeat"), repeatXPattern = ctx.createPattern(this, "repeat-x"), repeatYPattern = ctx.createPattern(this, "repeat-y"); ctx.shadowOffsetX = 4; ctx.shadowOffsetY = 4; ctx.shadowBlur = 20; ctx.shadowColor = "rgb(230,230,250)"; ctx.strokestyle = "rgb(128,128,128)"; ctx.lineWidth = 1; ctx.fillStyle = repeatPattern; ctx.fillRect (125, 125, 325, 325); ctx.strokeRect (125, 125, 325, 325); ctx.fillStyle = noRepeatPattern; ctx.fillRect (0, 0, 100, 100); ctx.strokeRect (0, 0, 100, 100); ctx.fillStyle = repeatXPattern; ctx.fillRect (125, 0, 350, 100); ctx.strokeRect (125, 0, 350, 100); ctx.fillStyle = repeatYPattern; ctx.fillRect (0, 125, 100, 350); ctx.strokeRect (0, 125, 100, 350); }, !1); /* define Image.onload event handler before assigning Image.src */ smallImage.src = "https://vignette.wikia.nocookie.net/cardfight/images/8/89/De.jpg/revision/latest?cb=20130414214050"; }, !1);
body { background:rgb(90,90,110); padding:33px 0 } #box { width:500px; height:500px; background:rgb(50,50,70); margin:0 auto; box-shadow:0 0 0.25em 0.5em rgba(0,0,0,0.25) } #canvasArea { width:100%; height:100%; border:2px solid rgb(22,22,22) }
<div id="box"> <canvas id="canvasArea"> Your browser doesn't currently support HTML5 canvas. </canvas> </div>
BP;）
HTML5画布在翻译时模糊图像模式
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.