为了账号安全,请及时绑定邮箱和手机立即绑定

如何将图像添加到画布中

/ 猿问

如何将图像添加到画布中

德玛西亚99 2019-10-12 11:07:46

如何将图像添加到画布中

我正在试验HTML中的新画布元素。

我只是想在画布上添加一个图像,但由于某些原因,它不起作用。

我有以下代码:

HTML

<canvas id="viewport"></canvas>

CSS

canvas#viewport { border: 1px solid white; width: 900px; }

JS

var canvas = document.getElementById('viewport'),context = canvas.getContext('2d');make_base();function make_base(){
  base_image = new Image();
  base_image.src = 'img/base.png';
  context.drawImage(base_image, 100, 100);}

图像存在,我没有看到JavaScript错误。图像不显示。

一定是很简单的事情我错过了.。



查看完整描述

3 回答

?
慕雪6173905

也许你应该等到图像加载后才画出来。试一试:

var canvas = document.getElementById('viewport'),context = canvas.getContext('2d');make_base();function make_base(){
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function(){
    context.drawImage(base_image, 0, 0);
  }}

也就是说,在图像的onload回调中绘制图像。



查看完整回答
反对 回复 2019-10-13
?
素胚勾勒不出你

这是在画布上画图像的示例代码-

$("#selectedImage").change(function(e) {var URL = window.URL;var url = URL.createObjectURL(e.target.files[0]);img.src = url;img.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");        

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, 500, 500);}});

在上述代码中,selectedImage是一个输入控件,可用于在系统上浏览图像。有关在画布上绘制图像的示例代码的更多细节,同时保持高宽比:

http:/newapputil.blogpot.in/2016/09/Show-Image-on-画布-html5.html



查看完整回答
反对 回复 2019-10-13
?
喵喔喔

这是在画布上画图像的示例代码-

$("#selectedImage").change(function(e) {var URL = window.URL;var url = URL.createObjectURL(e.target.files[0]);img.src = url;img.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");        

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0, 500, 500);}});

在上述代码中,selectedImage是一个输入控件,可用于在系统上浏览图像。有关在画布上绘制图像的示例代码的更多细节,同时保持高宽比:

http:/newapputil.blogpot.in/2016/09/Show-Image-on-画布-html5.html



查看完整回答
反对 回复 2019-10-13

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信