有哪些开源html5的组态软件,FScada组态软件

1.7.1 绘制图像绘制图像需要使用 drawImage() 方法。此方法需要一个图像对象和一个起始点坐标作为参数，其

中起始点坐标是相对于canvas的左上角的位置。如：

context.drawImage(imageObj, x, y);

效果图

代码

}

#myCanvas {

border: 1px solid #9C9898;

}

window.onload = function() {

var canvas = document.getElementById(“myCanvas”);         var context = canvas.getContext(“2d”);

var x = 188;         var y = 130;         var width = 200;         var height = 137;         var imageObj = new Image();

imageObj.onload = function() {

context.drawImage(imageObj, x, y, width, height);

};

imageObj.src =

“http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg”;       };

1.7.3 图像裁剪

方法 drawImage() 还可以增加另六个参数来实现对图像的裁剪。这六个参数是, sourceX,

sourceY, sourceWidth, sourceHeight, destWidth 和 destHeight。这六个参数对应的含义可以参阅后面的示意图。

context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh);

效果图

代码

}

#myCanvas {

border: 1px solid #9C9898;

}

window.onload = function() {

var canvas = document.getElementById(“myCanvas”);         var context = canvas.getContext(“2d”);         var imageObj = newImage();

imageObj.onload = function() {           // 绘制剪裁的图像

var sourceX = 150;           var sourceY = 0;           var sourceWidth = 150;           var sourceHeight = 150;           vardestWidth = sourceWidth;           var destHeight = sourceHeight;           var destX = canvas.width / 2 – destWidth / 2;           vardestY = canvas.height / 2 – destHeight / 2;

context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

};

imageObj.src =

“http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg”;

};

1.7.4 图像加载器

当在canvas中要使用多幅图像的时候，最好是在绘制图像之前就把图像全部加载。一个方便的办法是用一个图像加载函数一下在把图像全加载进图像对象中来，然后再调用一个用户定义的函数。效果图

代码

}

#myCanvas {

border: 1px solid #9C9898;

}

function loadImages(sources, callback) {

var images = {};         var loadedImages = 0;

var numImages = 0;         // 获取图像源的数量

for(var src in sources) {           numImages++;

}

for(var src in sources) {           images[src] = new Image();           images[src].onload = function() {            if(++loadedImages >= numImages) {               callback(images);

}

};

images[src].src = sources[src];

}

}

window.onload = function(images) {

var canvas = document.getElementById(“myCanvas”);         var context = canvas.getContext(“2d”);

var sources = {           darthVader: “http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg”,           yoda:

“http://www.html5canvastutorials.com/demos/assets/yoda.jpg”

};

loadImages(sources, function(images) {

context.drawImage(images.darthVader, 100, 30, 200, 137);           context.drawImage(images.yoda, 350, 55, 93, 104);

});

};

相关资源：液晶屏横幅软件-其它工具类资源-CSDN文库