想要當有認證的名人嗎?可以過個乾癮,自己在封面圖上直接加個藍勾勾喔。但是畢竟是假的,顏色有點不同,而且使用手機瀏覽就破功了,趣味一下吧!

201511143        我不太熟悉javascript搭canvas使用,一行一行寫我寫不出來,所以是直接找網路上的範本,使用了「小賴的實戰記錄」的〈JavaScript - 圖片合成、堆疊提供的程式碼,看他圖片的網址,可能也是參考其他網站,我就不追本溯源了。實測一下,電腦版的firefox和chrome都沒問題,IE和手機chrome好像開得出來,抓不下來。

直接前往網站:http://studentweb.ncnu.edu.tw/100105503/funny/bluehook.php

以下是程式碼,除了調整高低以外,我主要修改的部分就只是48和49行的圖片參數,然後用php寫一個post傳值,讓使用者可以自己帶入圖片,如果使用者沒帶入圖片,一開始會先載入預設圖,post傳值的php語法很普通,無須多解釋。考慮到有的人名字二個字或更長,改天有空再加一個調整藍勾勾水平位置的按鈕。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
      #divContext {
	    position:absolute;
		left:100px;
		top:100px;		
      }
    </style>
    <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];
        }
      }

      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, 250, 55, 93, 104);                    
        });
      };

    </script>
  </head>
  <body>
    <div id="divContext">
		<canvas id="myCanvas" width="578" height="200"></canvas>
	</div>    
  </body>
</html>

okplaymayday 發表在 痞客邦 PIXNET 留言(0) 人氣()