|
 |
| |
ผมลองเขียนก่อนต่อภาพ โดยใช้ canvas ดูครับ แต่ผมอยากให้สามารถกดที่ radio แล้วภาพที่เลือก เปลี่ยนแทนที่ภาพเดิมอะครับ |
| |
 |
|
|
 |
 |
|
แบบว่ามี ภาพ ส่วนอื่นๆ ให้เลือกอะครับเป็น radio พอกดภาพส่วนที่เลือก ก็เปลี่ยนเป็นภาพใหม่อะครับ เปลี่ยนเป็นส่วนๆ ไปอะครับ
Code (PHP)
<canvas id="myCanvas" width="600" height="500"></canvas>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
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];
}
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var sources = {
a: 'img/1.png',
b: 'img/2.png',
c: 'img/3.png',
d: 'img/4.png',
e: 'img/5.png',
f: 'img/6.png',
g: 'img/7.png'
};
loadImages(sources, function(images) {
context.drawImage(images.a, 120, 28, 340, 417);
context.drawImage(images.b, 120, 28, 340, 417);
context.drawImage(images.c, 120, 28, 340, 417);
context.drawImage(images.d, 120, 28, 340, 417);
context.drawImage(images.e, 120, 28, 340, 417);
context.drawImage(images.f, 120, 28, 340, 417);
});
</script>
Tag : PHP, MySQL
|
|
|
 |
 |
 |
 |
| Date :
2015-06-17 15:02:48 |
By :
tangsupap |
View :
639 |
Reply :
1 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
Code (PHP)
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
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];
}
}
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);
});
</script>
</body>
</html>
|
| |
|
|
| |
| Date :
2015-06-19 09:52:32 |
By :
ผ่านมา |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
