MICKEY的書蟲窩: 2016

2016年10月3日星期一

HTML5 - canvas : image gary

HTML

<canvas id="myCanvas" width="200" height="276"></canvas>

JQuery 1.9.1

$(function(){
  function drawImg(imgObj){
    var ctx=$('#myCanvas')[0].getContext('2d');
    //設定繪圖物件的位置與大小
    var _x=0,_y=0,_w=$('#myCanvas').width(),_h=($('#myCanvas').height()-10)/2;
    
    ctx.drawImage(imgObj,_x,_y,_w,_h);//繪製要被複製的圖
    var imgData=ctx.getImageData(_x,_y,_w,_h);//擷取複製範圍
    var data=imgData.data;//取的複製範圍的data
    console.log(data.length);
    for(var i=0;i<data.length;i+=4){

      //設定RGB的灰色值
      var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
      data[i]=brightness;//設定red的新值
      data[i+1]=brightness;//設定green的新值
      data[i+2]=brightness;//設定blue的新值
    };
    ctx.putImageData(imgData,_x,_h+10);//將處理完成的圖秀出
  };
  var imgObj= new Image();//設置新的image物件
  imgObj.crossOrigin='anonymous';//設置跨域使用為匿名
  $(imgObj).load(function(){
    drawImg(this);//驅動drawImg
  });
  imgObj.src = 'https://c2.staticflickr.com/1/437/18634993201_10aa53d5ef_k.jpg';
});

主要使用function :

drawImg(imgObj) - 自製function，複製一個圖片並改變色階為黑白圖片。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/ou6ftL57/

2016年9月24日星期六

HTML5 - canvas : imagData

HTML

<!--使用crossOrigin="anonymous"解決跨域存取圖片的問題，
參考連結https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image-->
<img src="https://c2.staticflickr.com/1/437/18634993201_10aa53d5ef_k.jpg" width="200" 
crossOrigin="anonymous">
<canvas id="myCanvas" width="200" height="133"></canvas>

JQuery 1.9.1

$(function() {
  function drawImg(imgObj) {
    var ctx = $('#myCanvas')[0].getContext('2d');
    var _iow = imgObj.width;//呼叫的圖形寬度
    var _ioh = imgObj.height;//呼叫的圖形高度
    var _iox = 0;//將要複製的圖形之起始x基準點
    var _ioy = 0;//將要複製的圖形之起始y基準點
    ctx.drawImage(imgObj, _iox, _ioy, _iow, _ioh);//將呼叫的物件寫入畫布中
    var cImg = ctx.getImageData(_iox, _ioy, _iow, _ioh);//設定要複製的資料範圍
    for (var i = 0; i <= cImg.data.length; i += 4) {//每四筆就loop一次
      cImg.data[i] = 255 - cImg.data[i];//Rad-用255色去剪掉Red原本的值
      cImg.data[i + 1] = 255 - cImg.data[i + 1];//green-用255色去剪掉green原本的值
      cImg.data[i + 2] = 255 - cImg.data[i + 2];//blue-用255色去剪掉blue原本的值
      cImg.data[i + 3] = 255;//alpha-維持原樣不變
    }
    ctx.putImageData(cImg, 0, 0);//將改變過顏色的圖片於原位覆蓋上去
  }
  $('img').load(function() {
    drawImg(this);//這邊的this=$('#img')
  }).each(function() {//執行完$('#img')的載入後，就遍歷$('#img')
    if (this.complete) $(this).load();//如果html的這張圖片載入成功，＄('img')就再執行load內容一次
  });
});

主要使用function :

crossOrigin - 結合合適的CROS響應頭，就可實踐跨域使用<img>，這裡有更想詳細的說明https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image。
complete - HTML DOM complete 屬性，可返回瀏覽器是否已完成圖片的加載。
getImageData - 複製畫布上指定的像素範圍，getImageData(將要拷貝的起始x位置, 將要拷貝的起始y位置, 將要拷貝的寬度, 將要拷貝的高度)。
imageData - getImageData拷貝的圖片中每個像素的值，imageData.data[red:value,green:value,blue:value,alpha:value]。

語法解說

rad 0 ~ 255

green 0 ~ 255

blue 0 ~ 255

alpha 0 ~ 255（0為全透明，255為不透明）
putImageData - 將從getImageData取的的資料放回畫布，putimageData(要放回畫布的物件名稱, 要放回畫布上的x座標, 要放回畫布上的y座標, 以自身為基準的左移幅度-可選, 以自身為基準的下移幅度-可選, 放上畫布時的寬度-可選, 放上畫布時的高度-可選)

Result

JSFiddle
https://jsfiddle.net/MickeyChen/v6jyutdt/

2016年9月15日星期四

這個範例的運作方式是，先把圖型效果在tempCanvas畫好一個就以單張圖片的方式複製到mainCanvas上面，然後tempCanvas裡原先的圖形就會被移除，並用來預備繪製下一個圖形效果。

如果多個效果都寫在一個畫布上，容易出現效果錯亂的問題，所以這個範例是使用畫一個存出來一個的方式執行。

參考網站：http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/

HTML

<!--Original source http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/-->
<canvas id="tempCanvas" width="600" height="400" style="display:none;"></canvas>
<canvas id="mainCanvas" width="600" height="400"></canvas>

JQuery 1.9.1

$(function(){
  var tempCtx=$('#tempCanvas')[0].getContext('2d');//形成圖形相加效果的畫布
  var temp=$('#tempCanvas');
  var bCtx=$('#mainCanvas')[0].getContext('2d');//tempCtx圖形繪製出來後，擺放圖形的畫布
  var bCtxW=$('#mainCanvas').width();//消除已經複製過的圖形時所需要使用的寬
  var bCtxH=$('#mainCanvas').height();//消除已經複製過的圖形時所需要使用的高
  var sW=50;//第一層的方形寬高
  var cR=30;//第二層的圓形半徑
  var offset=45;//兩個圖相疊時的差距
  var operationOffset=140;//下一個圖形擺放的間距
  var i=[];//放效果指令的陣列

  //將所有的交疊效果放入i陣列中
  i.push('source-atop');
  i.push('source-in');
  i.push('source-out');
  i.push('source-over');
  i.push('destination-atop');
  i.push('destination-in');
  i.push('destination-out');
  i.push('destination-over');
  i.push('lighter');
  i.push('darker');
  i.push('xor');
  i.push('copy');
  console.log(i);
  
  for(var n=0; n < i.length; n++){
    tempCtx.save();//將每次繪製圖前的空值狀態存下，以便繪製完成後恢復到空值狀態
    tempCtx.clearRect(0,0,bCtxW,bCtxH);//清除tempCtx上的上一個交疊效果圖形
    
    tempCtx.beginPath();//繪製上層的方形
    tempCtx.rect(0,0,sW,sW);
    tempCtx.fillStyle="#62EACB";
    tempCtx.fill();
    
    tempCtx.globalCompositeOperation=i[n];//把效果從陣列中取出放入驅動效果
    console.log(i[n]);
    
    tempCtx.beginPath();//繪製下層的圓形
    tempCtx.arc(offset,offset,cR,0,2*Math.PI);
    tempCtx.fillStyle='#E177EA';
    tempCtx.fill();
    tempCtx.restore();//回復到空值的狀態
    
    tempCtx.font='14px arial';
    tempCtx.fillStyle='#666';
    tempCtx.fillText(i[n],0,sW+45);//把效果的名稱列在圖形下面
    
    if(n > 0){
     if(n % 4 === 0){//圖形寫入mainCanavs食，每4個一排
       bCtx.translate(operationOffset*-3,operationOffset);//當遇到4能整除的那個就往下折行
      }else{
       bCtx.translate(operationOffset,0);//如果無法整除就直接往右增加
      }
    }
    bCtx.drawImage(tempCanvas,0,0);//把tempCanvas用image的方式繪製到mainCanvas上面
  }
});

主要使用function :

clearRect() - 刪除畫布上的一個區域，clearRect(要刪除的起始點x軸,要刪除的起始點y軸,要刪除的寬度,要刪除的高度)。

globalCompositeOperation - 控制兩個互相覆蓋的圖形使用何種覆蓋效果。

值	解說
source-over	預設值，正常順序的上下圖形覆蓋。
source-in	保留兩個圖形交疊的區域且保留上層圖形的樣式。
source-out	只保留非交疊的上層圖形的形狀與樣式。
source-atop	兩個圖形的樣式都保留但是只使用下層圖形的形狀。
destination-over	兩個圖形的上下層級互換。
destination-in	保留兩個圖形交疊的區域且保留下層圖形的樣式。
destination-out	只保留非交疊的下層圖形的形狀與樣式。
destination-atop	兩個圖形的樣式都保留但是只使用上層圖形的形狀。
lighter	兩個圖形交疊處的顏色由兩個圖形的色相加而成。
darker	已移除的值，兩個圖形交疊處的顏色由兩個圖形的色碼相減而成。
xor	兩個圖形交疊區為透明。
copy	移除其他圖形，只保留最上層的圖形。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/krjLs085/

HTML5 - canvas : clip

HTML

<canvas id="myCanvas" width="210" height="210"></canvas>

JQuery 1.9.1

$(function(){
  var ctx=$('#myCanvas')[0].getContext('2d');
  var _x=$('#myCanvas').width()/2;//設定圓心的x軸
  var _y=$('#myCanvas').height()/2;//設定圓心的y軸
  var radius=100;//設定半徑
  var offset=65;//設定位移距離
  ctx.save();//設定這個斷點以上的code為起始儲存點
  
  //遮罩範圍
  ctx.beginPath();//開始繪製遮罩
  ctx.arc(_x,_y,radius,0,2*Math.PI,false);//繪製一個正圓形的遮罩
  ctx.clip();//設定遮罩功能
  
  //繪製A圖
  ctx.beginPath();//開始繪製A圖
  ctx.arc(_x-offset,_y-offset,radius,0,2*Math.PI,false);//繪製一個向左上角偏移的圓形
  ctx.fillStyle='#0D4351';//設定為深藍
  ctx.fill();//填色

  //繪製B圖
  ctx.beginPath();//開始繪製B圖
  ctx.arc(_x+offset,_y,radius,0,2*Math.PI,false);//繪製一個向右偏移的圓形
  ctx.fillStyle='#EA4881';//設定為桃紅
  ctx.fill();//填色

  //繪製C圖
  ctx.beginPath();//開始繪製C圖
  ctx.arc(_x,_y+offset,radius,0,2*Math.PI,false);//繪製一個向下偏移的圓形
  ctx.fillStyle='#6BD1EA';//設定為天空藍
  ctx.fill();//填色
  
  ctx.restore();//回復起始設定
  ctx.beginPath();//開始繪製外框線
  ctx.arc(_x,_y,radius,0,2*Math.PI,false);//繪製一個正圓為外框線，包覆遮罩邊框
  ctx.lineWidth=5;//設定外框限寬度
  ctx.strokeStyle='#66B79B';//設定為綠色
  ctx.stroke();//繪製線段
});

主要使用function :

clip() - 用來剪裁畫布的可見範圍。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/f9qrbvsd/

2016年9月9日星期五

HTML5 - canvas : shadow & globalAlpha

HTML

<canvas id="myCanvas" width="340" height="200"></canvas>

JQuery 1.9.1

$(function(){
  var ctx=$('#myCanvas')[0].getContext('2d');
  ctx.rect(10,10,100,100);//繪製一個正方形。
  ctx.fillStyle='#E9EA6B';//給予填色。
  ctx.shadowColor="#B7A766";//設定陰影顏色。
  ctx.shadowBlur=10;//設定陰影霧化程度。
  ctx.shadowOffsetX=5;//設定陰影x座標。
  ctx.shadowOffsetY=5;//設定陰影y座標。
  ctx.fill();//
  
  ctx.beginPath();//繪製第一層的圓形。
  ctx.arc(200,60,50,0,2*Math.PI);
  ctx.fillStyle='#50510D';
  ctx.fill();
  
  ctx.beginPath();//繪製第二層的圓形。
  ctx.globalAlpha=0.5;//設定第二層圓形的透明度。
  ctx.arc(250,60,50,0,2*Math.PI);
  ctx.fillStyle='#758CC0';
  ctx.fill();
});

主要使用function :

globalAlpha - 用來設定物件的透明度，可設定值為：0 ~ 1。

shadow -

語法	解說
shadowColor	設定陰影顏色，需與shadowBlur合用。
shadowBlur	設定陰影物化程度，值：0 ~ 100。
shadowOffsetX	設定對應生成陰影物件的x軸定位，正數向右移，負數向左移。
shadowOffsetY	設定對應生成陰影物件的y軸定位，正數向下移，負數向上移。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/naxsrvej/

2016年9月7日星期三

HTML5 - canvas : transformations

這篇所有綠色的方框都是個別效果的基本樣式，然後每一個範例都有先回復到上一個樣式再將已經回復的樣式存起來，所以每個樣式的繪圖起始樣式都是用base的樣式去做複製延伸，如果沒有這個儲存回覆的動作，就會因為<canvas>的樣式繼承特性，在同一個<canvas>裡面的繪圖物件都會繼承上一個繪圖物件的樣式，繪製出來的物件就會亂跑。

HTML

<canvas id="myCanvas1" width="600" height="300"></canvas>

JQuery 1.9.1

$(function(){
  var cxt=$('#myCanvas1')[0].getContext('2d');

  //basic style
  cxt.strokeStyle="#91B766";
  cxt.strokeRect(10,10,100,100);
  cxt.save();//保存這個basic樣式的設定。
  
  //translate
  cxt.restore();//回復到上一個save的basic樣式設定狀態。
  cxt.save();//保存這個回復成basic樣式的設定。
  cxt.strokeRect(120,10,100,100);
  cxt.translate(120,10);//重製一個x:120，y:10的這個物件在畫布的x:120，y:10的地方。
  cxt.strokeStyle="#926BEA";
  cxt.strokeRect(10,10,100,100);
  
  //scale
  cxt.restore();//回復到上一個save的basic樣式設定狀態。
  cxt.save();//保存這個回復成basic樣式的設定。
  cxt.strokeRect(300,10,100,100);
  cxt.scale(0.5,0.5);//重製一個x:300，y:10的這個物件在畫布上，並按照比例縮放50%。
  cxt.strokeStyle="#926BEA";
  cxt.strokeRect(600,20,100,100);
  
  //rotate
  cxt.restore();//回復到上一個save的basic樣式設定狀態。
  cxt.save();//保存這個回復成basic樣式的設定。
  cxt.strokeRect(499,10,100,100);
  cxt.translate(499,10);//給予選轉的物件新的x軸與y軸。
  cxt.rotate(5*Math.PI/180);//旋轉正5度。
  cxt.strokeStyle="#926BEA";
  cxt.strokeRect(499,10,100,100);//這個物件的x,y就是這個物件選轉的圓心。
  
  //transform
  cxt.restore();//回復到上一個save的basic樣式設定狀態。
  cxt.save();//保存這個回復成basic樣式的設定。
  cxt.strokeRect(10,150,100,100);
  cxt.transform(1,0,0.5,1,-75,0);//繪製一個平行垂直傾斜90*0.5度的平行四邊形。
  cxt.strokeStyle="#926BEA";
  cxt.strokeRect(10,150,100,100);
  //setTransform
  cxt.setTransform(1,0,0,1,0,0);//不會繼承到上一個平行四邊形的樣式，直接重新繪製一個正方形。
  cxt.strokeStyle='#B09BC0';
  cxt.strokeRect(110,150,100,100);
  
  //Mirror
  cxt.restore();//回復到上一個save的basic樣式設定狀態。
  cxt.save();//保存這個回復成basic樣式的設定。
  cxt.scale(1,-1);//用y軸的-1將Hello!垂直反轉成倒過來的文字。
  cxt.font='50px Arial';
  //因為文字被整個垂直反轉，所以y軸必須使用負值讓文字重新回到<canvas>裡面，不然文字會跑出<canvas>外面。
  cxt.fillText('Hello!',350,-180);
});

主要使用function :

save() - 保存當前環境狀態，會以堆存的方式被放進保存清單裡面，如果存入過多資料，會造成系統負擔。
restore() - 回復到上一個保存過的路徑狀態跟屬性。

transformations -

語法	解說
translate(新物件在畫布上的x軸, 新物件在畫布上的x軸);	重新複製物件在對照畫布(0,0)的地方。
scale(縮放的寬比例, 縮放的高比例);	縮放的比例以1為原比例，0.5為50%的比例，2為200%的比例，以此類推，負值為將物件鏡射。
rotate(角度*Math.PI/180);	需要以(角度*Math.PI/180)的公式照計算出圓弧的弧度，並依照弧度轉動角度，圓心座標為繪製出這個物件的座標軸減掉放置這個物件的容器的座標軸所得出的(x,y)。
transform(水平縮放,水平傾斜,垂直縮放,垂直傾斜,水平移動,垂直移動);	縮放、旋轉與移動繪製物件。可以在保持物件已繪製過的樣式，再增加縮放、旋轉與移動的效果。
setTransform(水平縮放,水平傾斜,垂直縮放,垂直傾斜,水平移動,垂直移動);	與transform一樣的效果，不同處為這個語法只會影響到在這個語法之後編寫的繪圖樣式。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/bzLbttwy/

2016年9月6日星期二

HTML5 - canvas : font(2)

HTML

<!--Original source http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/-->
<canvas id="myFont" width="500" height="400"></canvas>

JQuery 1.9.1

$(function(){
  function wrapText(cxt,txt,x,y,maxWidth,lineHeight){
  //cxt:<canvas>,txt:文案,x:文案的起始x軸,y:文案的起始y軸,maxWidth:文案的最大寬度,lineHeight:文案行高

    var words=txt.split(' ');//把文案用空白字元為依據來分割並給予words。
    var line='';//擷取出來的單字將要存入的容器。
    
    for(var n=0; n < words.length; n++){//按照擷取出來的單字總數來循環執行。
      var txtLine=line+words[n]+' ';//每個單字加上一個空白字元並放入txLine。
      var metrics=cxt.measureText(txtLine).width;//計算每一次執行時txtLine長度是多少。
      if(metrics > maxWidth && n > 0){//判斷當txtLine長度超過maxWidth且文字多於0個。
       cxt.fillText(line,x,y);//新增一行文字。
        line=words[n]+' ';//改變該行文字的第一個字為使txtLine超出maxWidth的那個文字。
        y+=lineHeight;//y軸往下移動一個LineHeight的高度。
      }else{
       line=txtLine;//直接蓋過原本的當行的文字。
      };
    };
    cxt.fillText(line,x,y);//創建第一行文字。
  };
  var article='The greatest test of courage on earth is to bear defeat without losing heart. 
               世界上對勇氣的最大考驗是忍受失敗而不喪失信心。';
  var cxt=$('#myFont')[0].getContext('2d');
  cxt.font='20px Calibri';
  cxt.fillStyle='#666';
  wrapText(cxt,article,10,20,490,30);
});

主要使用function :

wrapText() - 此function的作用為，繪製一個規定範圍內按照英文書寫習慣，文案自動折行。

split() - 把一段文字分割成多個單一文字，'文字物件'.split('字符串或正則表達式，按照這個值去分割文字物件 - 必填', '返回分割的最大返回分割的最大長度，以1為起始計算點，無設定以全文字物件長度返回 - 非必填')。

範例	解說
"Hi! How was today?".split( '' );	結果//H,i,!, ,H,o,w, ,w,a,s, ,t,o,d,a,y,? 每一個字元包含空白字元都會被分割列出。
"Hi! How was today?".split( ' ' );	結果//Hi!,How,was,today? 使用'空白字元'會以空白字元為分割點分割列出，空白字元會被省略掉。
"Hi! How was today?".split( ' ', 2 );	結果//Hi!,How 只抓取第1、2個單字。
":1:2:3".split( ':' );	結果// ,1,2,3 以：作為分割點分割列出，：會被省略掉。
var words = sentence.split( ' / \s+/ ' );	把句子分割成單字。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/84cuwtos/

2016年9月5日星期一

HTML5 - canvas : font(1)

HTML

<canvas id="myFont" width="300" height="200" style="border:1px solid #999;"></canvas>

JQuery 1.9.1

$(function(){
  var cxt=$('#myFont')[0].getContext('2d');
  var txt='BEAST';//設定文字文案。
  var _x=$('#myFont').width()/2;//取得畫布的橫向中心點。
  var _y=$('#myFont').height()/2;//取的畫布的直向中心點。
  cxt.font='oblique 40px Arial';//設定文字樣式。
  cxt.textAlign='center';//設定文字居中對齊。
  cxt.textBaseline='middle';//設定文字垂直置中對齊。
  cxt.fillStyle='#ccc';
  cxt.fillText(txt,_x,_y-20);//設定填色文字的文案與位置。
  cxt.strokeStyle='#664746';
  cxt.strokeText(txt,_x,_y-20);//設定線框文字的文案與位置。
  
  var txtW=cxt.measureText(txt).width;//取得繪製文字的寬度。
  cxt.font='normal 20px Calibri';
  cxt.fillStyle='#333';
  cxt.fillText(txtW+'PX',_x,_y+20);
});

主要使用function :

textAling - 設定文字左右對齊依據。

值	屬性
start	預設值，內文在指定位置開始。
end	內文在指定位置結束。
right	內文以指定位置居右對齊。
center	內文以指定位置居中對齊。
left	內文以指定位置居左對齊。

textBaseLine - 設定文字垂直對齊的基線，以1em為高度基準。

圖片來源：http://www.w3school.com.cn/i/textBaseline.gif

值	屬性
alphabetic	預設值，文字位在普通字母基線。
top	文字位在以1em平方為單位的方框上端。
hanging	文字位在懸掛基線。
middle	文字位在以1em平方為單位的方框中間。
ideographic	文字位在表意基線。
bottom	文字位在以1em平方的方框下端。

fillText() - 把填色文字寫入<canvas>，fillText('要寫入的文案',起始x軸,起始y軸)。
strokeText() - 把線框文字寫入<canvas>，strokeText('要寫入的文案',起始x軸,起始y軸)。

font - 在畫布上寫一段文案，默認值為10px sans-serif。最少需填寫font='font-size,font-family'兩個值。

值	屬性
font-style	字體樣式：normal正常 / italic斜體 / oblique斜體
font-variant	字體變體：normal正常 / small-caps小型大寫字體
font-weight	字體粗細：normal正常 / bold粗體 / bolder特粗體 / lighter細體 / 100 ~ 900自訂粗細
font-size / line-height	字體大小與行高，以px為單位。
font-family	字型，常用的為： Arial / courier New / Times New Roman 等等。
caption	使用標題控制元件<caption>的字體EX：button、drop-downs等等。
icon	使用於標記圖示的字體。
menu	使用於菜單的字體。
message-box	使用於對話框的字體。
small-caption	使用於小型控制元件的字體。
status-bar	使用在window視窗狀態欄的字體。
initial	將此屬性設置為默認值。
inherit	繼承父元件的文字屬性。

measureText().width - measureText(要測量的文本).width，取的畫布上的文字寬度。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/bbryzekb/

2016年8月29日星期一

HTML5 - canvas : drawImage(2)

HTML

<!--Original source http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/-->

<canvas id="myCanvas" width="400" height="400"></canvas>

JQuery 1.9.1

$(function(){
  function loadedImg(sources,callback){//sources=圖片素材來源物件，callback=處理圖片載入的callback function
  var imgs={};//建立imgs物件
  var loadedImgs=0;//預設已載入的圖片數為0
  var imgsTotal=0;//預設載入圖片總數為0
  for(var src in sources){//遍歷sources物件，src初始值為0
    imgsTotal++;//每執行一次imgsTotal+1
  };
  for(var src in sources){//遍歷sources物件，src初始值為0
    imgs[src]=new Image();//創建<img>物件
    imgs[src].onload=function(){//當圖片載入後
      if(++loadedImgs>=imgsTotal){//loadedImg先+1，當以載入圖片>=圖片總數時
        callback(imgs);//將imgs物件放入callback function
      };
    };
    imgs[src].src=sources[src];//將sources物件的圖片連結擷取出來給imgs
    };
  };
  var cxt=$('#myCanvas')[0].getContext('2d');
  var imgLink={//存有圖片路徑的物件
    photo1:'https://c2.staticflickr.com/1/437/18634993201_10aa53d5ef_k.jpg',
    photo2:'https://c3.staticflickr.com/1/469/18010094874_0b037901e4_k.jpg'
  };
  loadedImg(imgLink,function(i){//這邊的function(i)等於callback(imgs)
    cxt.drawImage(i.photo1,10,10,200,200);//創建第一張圖，用i.photo來連結使用的<img>
    cxt.drawImage(i.photo2,10,220,200,200);//創建第二張圖，用i.photo來連結使用的<img>
  });
});

主要使用function :

loadedImg() - 此function的作用為，當圖片都載入完成後，才繪製canvas裡的圖片。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/qs6erbqL/

HTML5 - canvas : drawImage(1)

HTML

<canvas id="myCanvas" width="400" height="200"></canvas>
<canvas id="myCanvasCrop" width="400" height="400"></canvas>

JQuery 1.9.1

$(function(){
  var cxt=$('#myCanvas')[0].getContext('2d');
  var imgObj=new Image();
  imgObj.onload=function(){
    var imgWidth=imgObj.width*0.1;//根據原圖大小縮小寬90%
    var imgHeight=imgObj.height*0.1;//根據原圖大小縮小高90%
    cxt.drawImage(imgObj,0,0,imgWidth,imgHeight);
  }
  imgObj.src='https://c1.staticflickr.com/1/359/18606422976_a1fa874e07_k.jpg';//圖片導入
 
  var cxtC=$('#myCanvasCrop')[0].getContext('2d');
  var imgCrop=new Image();
  imgCrop.onload=function(){
    cxtC.drawImage(imgCrop,300,400,300,300,0,0,300,300);
  };
  imgCrop.src=imgObj.src;//兩個<canvas>使用同一張外部相片
});

主要使用function :

drawImage() - 在畫布上繪製圖片，drawImage('要使用的圖像<img>','素材圖片要擷取的x軸','素材圖片要擷取的y軸','素材圖片要擷取的寬','素材圖片要擷取的高','這張圖要放在<canvas>的x軸','這張圖要放在<canvas>的y軸','這張圖要放在<canvas>的寬','這張圖要放在<canvas>的高')。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/Lnhbh3ua/

2016年8月26日星期五

HTML5 - canvas : gradient & pattern

HTML

<canvas id="myCanvas" width="400" height="400"></canvas>

JQuery 1.9.1

$(function(){
  var cxt=$('#myCanvas')[0].getContext('2d');
  //繪製不規則圖形
  cxt.beginPath();
  cxt.moveTo(100,50);//繪圖開始
  cxt.bezierCurveTo(120,0,140,0,135,50);
  cxt.bezierCurveTo(170,10,180,20,190,50);
  cxt.bezierCurveTo(250,10,300,20,290,70);
  cxt.bezierCurveTo(350,70,360,130,300,130);
  cxt.bezierCurveTo(300,200,250,190,200,150);
  cxt.bezierCurveTo(150,200,100,200,120,130);
  cxt.bezierCurveTo(50,100,0,20,100,50);
  cxt.closePath();//繪圖結束
  var img=new Image();//建立image物件
  img.src='https://c1.staticflickr.com/1/359/18606422976_a1fa874e07_k.jpg';//載入圖片
  var pattern=cxt.createPattern(img,'no-repeat');//設定圖片為pattern並給予cxt物件
  cxt.fillStyle=pattern;//將cxt填滿
  cxt.fill();
  cxt.stroke();
  
  cxt.beginPath();//繪圖開始
  cxt.rect(10,200,300,50);//繪製方形
  var grd=cxt.createLinearGradient(10,200,300,50);//繪製線性漸層並給予cxt物件
  grd.addColorStop(0,'yellow');//漸層起始顏色
  grd.addColorStop(1,'red');//漸層結束顏色
  cxt.fillStyle=grd;//將cxt填滿
  cxt.fill();
  
  cxt.beginPath();//繪圖開始
  cxt.arc(60,330,50,0,Math.PI,true);//繪製半圓
  cxt.closePath();//繪圖結束，缺少這個設定，半圓將因為未關閉，所以缺少下方直線線條
  var rGrd=cxt.createRadialGradient(60,330,0,60,330,50);//繪製圓形漸層並給予cxt物件
  rGrd.addColorStop(0,"yellow");//漸層起始顏色
  rGrd.addColorStop(1,"red");//漸層結束顏色
  cxt.fillStyle=rGrd;//將cxt填滿
  cxt.fill()
  cxt.stroke();
});

主要使用function :

closePath() - 告知程式這邊為繪圖的閉鎖點，結束繪製圖型。
createPattern() - 將外部圖片導入為繪製物件的背景圖片，createPattern('圖片物件','repeat / no-repeat / repeat-x / repeat-y')。
createLinearGradient() - 繪製線性漸層，須先畫好底部的框架物件，才能將漸層填入，createLinearGradient('漸層的起始點x軸', '漸層的起始點y軸', '漸層的寬度', '漸層的高度')。
addColorStop() - 配對createLinearGradient()顯示漸層的顏色區段addColorStop('顏色錨點0~1', '顏色')。
createRadialGradient() - 繪製放射狀漸層，須先畫好底部的框架物件，才能將漸層填入，createRadialGradient('漸層起始x軸', '漸層起始y軸', '起始半徑', '漸層結束x軸', '漸層結束y軸', '結束半徑')。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/0dyg5fp5/

2016年8月25日星期四

HTML5 - canvas : lineJoin & arcTo

HTML

<canvas id="myCanvas" width="300" height="100"></canvas>
<canvas id="corner" width="300" height="200"></canvas>

JQuery 1.9.1

$(function(){
  var cxt=$('#myCanvas')[0].getContext('2d');
  cxt.beginPath();
  cxt.moveTo(10,90);
  cxt.lineTo(50,10);
  cxt.lineTo(90,90);
  cxt.lineCap='round';
  cxt.lineJoin='round';//圓頭
  cxt.strokeStyle="blue";
  cxt.lineWidth=10;
  cxt.stroke();
  
  cxt.beginPath();
  cxt.moveTo(110,90);
  cxt.lineTo(150,10);
  cxt.lineTo(190,90);
  cxt.lineCap='butt';
  cxt.lineJoin='miter';//尖頭
  cxt.strokeStyle="red";
  cxt.stroke();
  
  cxt.beginPath();
  cxt.moveTo(210,90);
  cxt.lineTo(250,10);
  cxt.lineTo(290,90);
  cxt.lineCap='square';
  cxt.lineJoin='bevel';//平頭
  cxt.strokeStyle="green";
  cxt.stroke();
  
  var corner=$('#corner')[0].getContext('2d');
  var rectWidth=200;
  var rectHeight=100;
  var rectX=10;
  var rectY=10;
  var radius=50;
  
  corner.beginPath();
  corner.moveTo(rectX, rectY);//起始點
  corner.lineTo(rectX + rectWidth - radius, rectY);//上橫線
  corner.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + radius, radius);//導角
  corner.lineTo(rectX + rectWidth, rectY + rectHeight);//下直線
  corner.lineWidth =10;
  corner.lineCap='round';
  corner.stroke();
});

主要使用function :

lineJoin - 線條線條交界處樣式。

值屬性

round 圓頭。

miter 預設值，尖頭。

bevel 平頭。
arcTo() - 繪製線框導角用，arcTo(起始點x軸, 起始點y軸, 結束點x軸, 結束點y軸, 半徑)。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/1z8j6Lue/

2016年8月24日星期三

HTML5 - canvas : larc, quadratic & bezier

HTML

<canvas id="myCanvas" width="100" height="400"></canvas>

JQuery 1.9.1

$(function(){
  var cxt=$('#myCanvas')[0].getContext('2d');
  cxt.beginPath();
  cxt.arc(50,50,30,0,2*Math.PI,true);//正圓形
  cxt.stroke();
  
  cxt.beginPath();
  cxt.arc(50,120,30,1.2*Math.PI,1.8*Math.PI,false);//用正圓描繪出來的弧度
  cxt.strokeStyle='#f00';
  cxt.stroke();
  
  cxt.beginPath();
  cxt.moveTo(2,180);
  cxt.quadraticCurveTo(50,100,100,180);//二維曲線
  cxt.strokeStyle='green';
  cxt.stroke();
  
  cxt.beginPath();
  cxt.moveTo(50,250);
  cxt.bezierCurveTo(2,150,50,200,80,250);//三維曲線
  cxt.strokeStyle='blue';
  cxt.stroke();
  
});

主要使用function :

arc() - 用來畫正圓形或以正圓為依據的弧度，arc(正圓的中心x軸, 正圓的中心y軸, 半徑, 起始角度以三點鐘方向為0~1.9*Math.PI, 結束角度0~1.9*MathPI, true=逆時鐘 false=順時鐘)。

http://www.w3school.com.cn/i/arc.gif
quadraticCurveTo() - 用來繪製二維曲線，需要以moveTo()為開頭，quadraticCurveTo(控制點的x座標, 控制點的y座標, 結束點的x座標, 結束點的y座標)。

圖片來源：http://www.w3school.com.cn/i/quadraticcurve.gif
bezierCurveTo() - 用來繪製三維曲線，需要以moveTo()為開頭，bezierCurveTo(第一個控制點x座標, 第一個控制點y座標, 第二個控制點x座標, 第二個控制點y座標, 結束點的x座標, 結束點的y座標)。

圖片來源：http://www.w3school.com.cn/i/beziercurve.gif

Result

JSFiddle
https://jsfiddle.net/MickeyChen/11dy3oqm/

2016年8月23日星期二

HTML5 - canvas : line & font

Html5的新Tag中，用起來最讓我頭疼的可以算是canvas這個Tag了，所以還是乖乖的來寫學習筆記了.......

因為只需要一個畫布，所以html的部分只需要一個canvas就好。

HTML

<canvas height="300" id="canvas1" width="300"></canvas>

JQuery 1.9.1

$(function(){
  //先把畫布id存入變數中，並且宣告物件為2D類型。
  //使用jQuery時＄('#id')後面一定要接[0]，如使用JavaScript則不用另加[0]。
  var cxt=$('#canvas1')[0].getContext('2d');
  cxt.beginPath();//繪製第一個物件路徑。
  cxt.moveTo(10,10);//作畫的起始點。moveTo(x,y)
  cxt.lineTo(200,10);//從起始點算起要到下一個點的座標。lineTo(x,y)
  cxt.lineWidth=10;//線的寬度。
  cxt.lineCap='butt';//線頭的樣式，butt為切齊線段結尾點。
  cxt.strokeStyle='red';//設定線的顏色。
  cxt.stroke();//宣告這個圖形有線。
  cxt.font='20px';//設定文字大小
  cxt.fillStyle='blue';//設定繪圖物件內容物顏色，這邊只有文字會用到。
  cxt.fillText('Butt line', 210,15);//設定文字內容與座標。fillText('text',x,y)
  
  cxt.beginPath();//繪製第二個物件路徑。
  cxt.moveTo(10,30);
  cxt.lineTo(200,30);
  cxt.lineCap='round';//線頭的樣式，round為圓頭。
  cxt.stroke();
  cxt.fillText('Round line', 210,35);
  
  cxt.beginPath();//繪製第三個物件路徑。
  cxt.moveTo(10,50);
  cxt.lineTo(200,50);
  cxt.lineCap='square';//線頭的樣式，square為向外包裹的方形樣式。
  cxt.stroke();
  cxt.fillText('Square line', 210,55);
});

主要使用function :

getContext() - 每一個canvas都只能有一個環境設定，目前只支援2D，但未來會擴充到3D。
beginPath() - 開始繪製路徑，之後才可開始使用moveTo(), lineTo(), quadticCurveTo(), bezierCurveTo(), arcTo() 及arc()繪製路徑，後面必須宣告stroke()，路徑才會被繪製出來。
stroke() - 設定完所有繪製路徑與設定後，驅動繪製的function，一定要放在繪製設定的最尾端。
moveTo() - moveTo(起始x軸, 起始y軸)，繪製線條時一定要設定的起始點。
lineTo() - lineTo(下一個定位點的x軸, 下一個定位點的y軸)。
fillText() - 把填色文字寫入<canvas>，fillText('要寫入的文案',起始x軸,起始y軸)。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/eu7a82uk/

訂閱：文章 (Atom)

MICKEY的書蟲窩

2016年10月3日星期一

HTML5 - canvas : image gary

2016年9月24日星期六

HTML5 - canvas : imagData

2016年9月15日星期四

HTML5 - canvas : operations

HTML5 - canvas : clip

2016年9月9日星期五

HTML5 - canvas : shadow & globalAlpha

2016年9月7日星期三

HTML5 - canvas : transformations

2016年9月6日星期二

HTML5 - canvas : font(2)

2016年9月5日星期一

HTML5 - canvas : font(1)

2016年8月29日星期一

HTML5 - canvas : drawImage(2)

HTML5 - canvas : drawImage(1)

2016年8月26日星期五

HTML5 - canvas : gradient & pattern

2016年8月25日星期四

HTML5 - canvas : lineJoin & arcTo

2016年8月24日星期三

HTML5 - canvas : larc, quadratic & bezier

2016年8月23日星期二

HTML5 - canvas : line & font

標籤

外部連結

網誌存檔

BloggerAds

讀冊生活

熱門文章

關於我自己

語法	解說
rad	0 ~ 255
green	0 ~ 255
blue	0 ~ 255
alpha	0 ~ 255（0為全透明，255為不透明）

值	屬性
round	圓頭。
miter	預設值，尖頭。
bevel	平頭。

2016年10月3日 星期一

2016年9月24日 星期六

2016年9月15日 星期四

2016年9月9日 星期五

2016年9月7日 星期三

2016年9月6日 星期二

2016年9月5日 星期一

2016年8月29日 星期一

2016年8月26日 星期五

2016年8月25日 星期四

2016年8月24日 星期三

2016年8月23日 星期二

2016年10月3日星期一

2016年9月24日星期六

2016年9月15日星期四

2016年9月9日星期五

2016年9月7日星期三

2016年9月6日星期二

2016年9月5日星期一

2016年8月29日星期一

2016年8月26日星期五

2016年8月25日星期四

2016年8月24日星期三

2016年8月23日星期二