时间戳

首页 > 解决方案 > 尝试添加照片而不是颜色

javascript - 尝试添加照片而不是颜色

问题描述

    (function() {
    // Creates a new canvas element and appends it as a child
    // to the parent element, and returns the reference to
    // the newly created canvas element
  
  
    function createCanvas(parent, width, height) {
      var canvas = {};
      canvas.node = document.createElement('canvas');
      canvas.context = canvas.node.getContext('2d');
      canvas.node.width = width || 100;
      canvas.node.height = height || 100;
      parent.appendChild(canvas.node);
      return canvas;
    }
  
    function init(container, width, height, fillColor) {
      var canvas = createCanvas(container, width, height);
      var ctx = canvas.context;
      // define a custom fillCircle method
      ctx.fillCircle = function(x, y, radius, fillColor) {
        this.fillStyle = fillColor;
        this.beginPath();
        this.moveTo(x, y);
        this.arc(x, y, radius, 0, Math.PI * 2, false);
        this.fill();
      };
      ctx.clearTo = function(fillColor) {
        ctx.fillStyle = fillColor;
        ctx.fillRect(0, 0, width, height);
      };
      ctx.clearTo(fillColor || "yel");
  
      // bind mouse events
      canvas.node.onmousemove = function(e) {
        if (!canvas.isDrawing) {
          return;
        }
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var radius = 40; // or whatever
        var fillColor = '#ff0000';
        ctx.globalCompositeOperation = 'destination-out';
        ctx.fillCircle(x, y, radius, fillColor);
      };
      canvas.node.onmousedown = function(e) {
        canvas.isDrawing = false;
      };
      canvas.node.onmouseup = function(e) {
        canvas.isDrawing = true;
      };
    }
  
    var img = document.createElement("img");
    img.src= "blm.jpg";


    var container = document.getElementById('canvas');

    init(container, window.innerWidth, window.innerHeight, 'img');
  
  })();

嗨，我试图为我的画布做一个封面，而不是在我的代码上只使用纯黑色。相反，我希望我的名为“blm.jpg”的图像替换纯黑色。我不知道该怎么做。我对编码非常陌生，非常感谢我能得到的任何帮助:) 我添加了 var img = document 从底部开始的 5 行和从底部开始的第 4 行，我不确定这是否也意味着存在。

感谢您提前提供任何帮助:)

标签： javascript

解决方案

这是一个关于如何做到这一点的简单示例，我只是在背景图像上绘制网格

var canvas = document.querySelector("canvas"),
  ctx = canvas.getContext("2d"),
  backgroundImage = document.createElement("img");

backgroundImage.src = "https://openclipart.org/image/400px/svg_to_png/260587/Surreal-Fantastic-Nature.png";

function makeLine(start_x, start_y, end_x, end_y) {
  ctx.moveTo(start_x, start_y);
  ctx.lineTo(end_x, end_y);
}

function drawGrid(val, color) {
  ctx.beginPath();
  ctx.strokeStyle = color;
  for(var i = 0; i <= canvas.height; i += val) {
    makeLine(0, i, canvas.width, i);
  }
  for(var j = 0; j <= canvas.width; j += val) {
    makeLine(j, 0, j, canvas.height);
  }
  ctx.stroke();
}

// draw it first to make it the background and only when it loads
backgroundImage.onload = function() {
  ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
  drawGrid(10, "blue");
  drawGrid(20, "red");
  drawGrid(40, "black");
}
canvas {
  border-radius: 3px;
  box-shadow: 1px 1px 10px blue;
}
<canvas width="320" height="200">

您可能注意到我们需要等待图像加载才能绘制它并绘制其他东西，但这是另一种方法，将整个代码包装到window.onload方法中并将我们的图像添加为 HTML 元素并隐藏它当然

window.onload = function() {
  var canvas = document.querySelector("canvas"),
    ctx = canvas.getContext("2d"),
    backgroundImage = document.querySelector("#background-img");

  function makeLine(start_x, start_y, end_x, end_y) {
    ctx.moveTo(start_x, start_y);
    ctx.lineTo(end_x, end_y);
  }

  function drawGrid(val, color) {
    ctx.beginPath();
    ctx.strokeStyle = color;
    for(var i = 0; i <= canvas.height; i += val) {
      makeLine(0, i, canvas.width, i);
    }
    for(var j = 0; j <= canvas.width; j += val) {
      makeLine(j, 0, j, canvas.height);
    }
    ctx.stroke();
  }

  // no need for the .onload since the code is executing after everything loads
  ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
  drawGrid(10, "blue");
  drawGrid(20, "red");
  drawGrid(40, "black");
}
canvas {
  border-radius: 3px;
  box-shadow: 1px 1px 10px blue;
}
.hidden {
  display: none;
}
<canvas width="320" height="200"></canvas>
<img id="background-img" class="hidden" src="https://openclipart.org/image/400px/svg_to_png/260587/Surreal-Fantastic-Nature.png" alt="nature painting">

推荐阅读