HTML5 DOM__※CanvasRenderingContext2D.arc()

CanvasRenderingContext2D.arc()

arc(x, y, radius, startAngle, endAngle, counterclockwise)

HTML5_canvas_drawImage()_在canvas上繪製外部jpg點陣圖

< !DOCTYPE HTML>
< html>
< head>
< meta charset="utf-8">
< title>無標題文件< /title>
< style type="text/css">
#canvas1 {
 color: #000000;
 font-size: 100px;
 background-color: #000000;
 border: medium dotted #ffffff;
}
body {
 background-color: #000000;
}
< /style>< /head>

< body>

< canvas id="canvas1" width="550" height="400">< /canvas>
< script language="javascript">
//
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
//
var image = new Image();
image.onload = function(){
 context.drawImage(image,0,0,canvas.width,canvas.height);
};
image.src = "nv007-001a.jpg";
< /script>

< /body>
< /html>

Graphics.beginBitmapFill()方法 - 以點陣圖影像填滿繪圖區(拼貼) + Matrix物件旋轉點陣圖

beginBitmapFill(bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean = true, smooth:Boolean = false):void
以點陣圖影像填滿繪圖區。

apFill_1.swf

//
var bmd:BitmapData = new MyPhoto(0, 0);
//
var myMatrix:Matrix = new Matrix();
//旋轉60度，但需轉換為弧度
var angle:Number = 60*Math.PI/180;
/*with(myMatrix){
 //以下四行為旋轉屬性，與使用rotate屬性相同
 a = Math.cos(angle);
 b = Math.sin(angle);
 c = -Math.sin(angle);
 d = Math.cos(angle);
}*/
/*以下隱藏為使用Matrix的rotate屬性*/
myMatrix.rotate(60*Math.PI/180);

//
var mySH:Shape = new Shape();
//
var myGH:Graphics = mySH.graphics;
//
with(myGH){
 lineStyle(4, 0x000055);
 //
 beginBitmapFill(bmd, myMatrix, true, true);
 //
 drawRect(0, 0, 600, 600);
 endFill()
}
//
mySH.x = 0;
mySH.y = 0;
//
addChild(mySH);

HTML5__canvas標籤

< canvas id="canvas1" width="550" height="400">< /canvas>

var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");

context.fillStyle = "#aabbff";
context.fillRect(100,100,100,100)

context.fillStyle = "#ffffff";
context.fillText("Hello World!!!",150,130);

HTML 5 新增 < canvas> 標籤。
藉由JavaScript 操作 HTML DOM CanvasRenderingContext2D 對象所提供的一組繪圖 API，
達到在畫布上繪圖的目的。

A.在html5中加入標籤：
< canvas height="400" id="canvas1" width="550">< /canvas>

B.取得canvas 畫布的參照：
var canvas = document.getElementById("canvas1");

C.取得 Context 繪圖環境的參照：
var context = canvas.getContext("2d");
這即是取得 CanvasRenderingContext2D 對象的參照
CanvasRenderingContext2D 對象提供了一組豐富而可在畫布上繪圖的圖形函數。

< !DOCTYPE HTML>
< html>
< head>
< meta charset="utf-8">
< title>無標題文件< /title>
< style type="text/css">
#canvas1 {
 color: #000000;
 font-size: 100px;
 background-color: #FC0;
 border: medium dotted #036;
}

< /style>< /head>

< body>
< canvas id="canvas1" width="550" height="400">< /canvas>
< script language="javascript">
//
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
//
context.fillStyle = "#aabbff";
context.fillRect(100,100,100,100)
context.fillStyle = "#ffffff";
context.fillText("Hello World!!!",150,130);

< /script>

< /body>
< /html>

HTML5+JS_小動畫實驗

HTML5+JS_小動畫實驗

[PhotoShop] 製作3D球體，載入拼圖紋理

PhotoShop繁體中文語系檔

繁體中文版 PhotoShop CS5.5 可從以下路徑找到繁體中文語系檔 tw10428.dat
C:\Program Files\Adobe\Adobe Photoshop CS5.1\Locales\zh_TW\Support Files

將 tw10428.dat 暫時變換名稱，重新啟動 Photoshop，就變成英文版了。
當然，回復為 tw10428.dat 檔名後，Photoshop 也會回歸繁體中文版。

PhotoShop混色模式[中英]名稱對照