HTML5 Canvas 显示、拖动图片不影响背景

HTML5 Canvas 显示、拖动图片不影响背景

Canvas可以做很多事，例如显示pdf、显示图片、绘制图片等。这里教大家写一个显示图片，拖动图片不影响背景的方法

本例子需要3个文件

• 图片文件
• 显示图片的JS文件
• HTML文件

---

图片文件

dmx.jpg

随便找一张图片（非动态GIF）

显示图片的JS文件

CanvasImage.js

/**
 * 新建图片对象
 * @param url
 * @returns {CanvasImage}
 */
HTMLCanvasElement.prototype.newCanvasImage = function (url) {
    if(!this.canvasImages) {
        this.canvasImages = [];
    }
    var canvasImage = new CanvasImage(this, url);
    this.canvasImages.push(canvasImage);
    return canvasImage;
};
/**
 * Canvas里面所有的图片
 * @type {Array}
 */
HTMLCanvasElement.prototype.canvasImages = [];
/**
 * Canvas里面所有的图片
 * @returns {Array}
 */
HTMLCanvasElement.prototype.getCanvasImage = function () {
    if(!this.canvasImages) {
       this.canvasImages = [];
    }
    return this.canvasImages;
};

/**
 * Canvas图片对象
 * @param canvas
 * @param url 图片路径
 * @constructor
 */
function CanvasImage(canvas, url) {
    // 图片x坐标
    CanvasImage.prototype.x;
    // 图片y坐标
    CanvasImage.prototype.y;
    // 图片宽度
    CanvasImage.prototype.width;
    // 图片高度
    CanvasImage.prototype.height;
    // 图片对象
    CanvasImage.prototype.image;
    // 图片在Canva中原来的位置
    CanvasImage.prototype.source;
    // Canvas
    CanvasImage.prototype.canvas;
    CanvasImage.prototype.canvaContext;
    // 是否显示
    CanvasImage.prototype.isVisible;


    this.image = new Image();
    this.image.src = url;
    this.x = 0;
    this.y = 0;
    this.width = 0;
    this.height = 0;