HTML5画布图案

Question

I wrote the following code on my text editor: 我在文本编辑器上编写了以下代码：

!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>

This code s supposed to create a pattern from an online image, but it's not showing as the canvas is completely blank. 可以使用此代码从在线图像创建图案，但是由于画布完全空白，因此未显示。 Can you please tell me what I did wrong. 你能告诉我我做错了什么吗？

Answer 1

There wasn't much wrong with your code apart from correcting a few spelling inconsistencies and defining the new Image() event handler before assigning it's .src property. 除了纠正一些拼写不一致并在分配它的.src属性之前定义new Image()事件处理程序外，您的代码没有太多错误。 Also, remember to declare the charset of the document in the head section of the file. 另外，请记住在文件的head部分声明文档的charset 。 EG.. 例如..

<head>
    <meta charset="utf-8">
    ... etc ...
</head>

Anyway, after a little editing the major components of your page look like this. 无论如何，经过一些编辑后，页面的主要组件将如下所示。

 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 ;) BP;）

HTML5画布图案

问题描述

1 个解决方案

解决方案1
0 2018-02-11 04:50:32

HTML5画布图案

问题描述

1 个解决方案

解决方案1 0 2018-02-11 04:50:32

解决方案1
0 2018-02-11 04:50:32