javascript - Javascript Canvas：绘制图片

Question

我在画布上绘图时遇到问题。我希望用户能够更改画布上的背景，并且我最终希望能够在输入框中输入一些内容，并且它将出现在画布上的框中。在他们选择了背景（效果很好）之后，我一直在尝试在屏幕上显示更多内容，但是当我尝试添加一个简单的框时，我不能。我一直在尝试在代码的不同部分执行此操作，但对我不起作用，并且无法找到解决方案。

所以我要问的是，是否有一种特定的方式必须这样做才能获得图像（使用我已经工作的选择标签选择），并能够在所选图像的顶部绘制一个框。希望有人可以向我解释我将如何做到这一点！

function load(){
  draw()
}

//Canvas change background
function draw(){
  changeBackground("assets/images/1.jpg");
}


function changeBackground(imagePath){
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  var img=new Image();
  img.onload = function(){
        ctx.drawImage(img,0,0,954,507);
  };
  img.src=imagePath;
}


function background(){
  var imageN = document.getElementById("imageselector").value;
  console.log("Image picked as a Background: " + imageN)
  changeBackground("assets/images/" + imageN + ".jpg");
}

标签： javascript

Answer 1

让这成为您的应用程序的良好基础！

快乐编码！

const canvas = document.querySelector("#canvas");
const context = canvas.getContext("2d");
const imageInput = document.querySelector("#imageInput");
const textInput = document.querySelector("#textInput");
const imageUrl = 'https://i.picsum.photos/id/944/600/600.jpg';

imageInput.value = imageUrl;
const state = {
  image: null,
  text: ''
}

const width = window.innerWidth;
const height = window.innerHeight;;
canvas.width = width;
canvas.height = height;

textInput.addEventListener("keydown", ({key}) => {
  const value = textInput.value;
  
  if(key === "Backspace") {
    state.text = value.substring(0, value.length - 1);
  }
  else {
    state.text = value + key;
  }
  
  render();
})

imageInput.addEventListener("input", () => {
  getImage(imageInput.value)
    .then(image => {
      state.image = image;
      render();
    })
})

const render = () => {
  clear();
  drawBackground(state.image);
  drawText(state.text);
}

const drawText = (text) => {
  context.font = "40px Comic Sans";
  context.fillStyle = "white";
  const textMeasure = context.measureText(text);
  context.fillText(text, width / 2 - textMeasure.width / 2, height / 5);
}

const clear = () => {
  context.fillStyle = "white";
  context.fillRect(0, 0, width, height);
}

const getImage = (imagePath) => new Promise((resolve, reject) => {
  const image = new Image();
  
  image.onload = function() {
    resolve(image);
  };
  
  image.src = imagePath;
})

const drawBackground = (image) => { 
  context.drawImage(image, 0, 0, width, height);
}

getImage(imageInput.value)
  .then(image => {
    state.image = image;
    render();
  })

html, body {
  margin: 0;
  height: 100%;
  box-sizing: border-box;
}

#box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

#wrapper {
  background: white;
}

#textInput, #imageInput {
  width: 300px;
  padding: 1rem;
  background: transparent;
  border: none;
}


#canvas {
  position: absolute;
  z-Index: -1;
}

<canvas id="canvas"></canvas>
<div id="box">
  <div id="wrapper">
    <input id="imageInput" type="text" placeholder="Enter src or dataUri of an image...">
    <div>
      <input id="textInput" type="text" placeholder="Enter text to show up...">
    </div>
  </div>
</div>