jsベース(Canvasグラフィックスを使用)
14712 ワード
HTML 5の要素はJavaScript APIのセットを提供し、グラフィックと画像を動的に作成することができます.
グラフィックは特定のコンテキストで作成され、コンテキストオブジェクトは現在2つあります.1つ目は2 Dコンテキストで、元の描画操作を実行できます.
例:塗りつぶし、線の色とモードを設定します. 長方形を描画します. パスを描画します. テキストを描画します. グラデーションとモードを作成します.
2つ目は3 Dコンテキスト、すなわちWebGLコンテキストである.WebGLはOpenGLES 2から.0ブラウザに移植する、OpenGLES 2.0は、ゲーム開発者がコンピュータのグラフィック画像を作成する際によく使用する言語です.WebGLは2 Dコンテキストよりも豊富で強力なグラフィック画像処理能力をサポートし、
例: GLSLで記述された頂点とクリップシェーダ. はタイプ化配列をサポートし、すなわち配列中のデータを特定の配列タイプに限定することができる. テクスチャを作成および操作します.現在、主流ブラウザの比較的新しいバージョンでは、ラベルがサポートされています.同様に、これらのバージョンのブラウザも基本的に2 Dコンテキストをサポートしています.
しかし、WebGLでは、Firefox 4+とChromeだけがサポートしています.
原作者の苦労の総括に感謝します!原文住所:
http://blog.csdn.net/bboyjoe/article/details/50381006
グラフィックは特定のコンテキストで作成され、コンテキストオブジェクトは現在2つあります.1つ目は2 Dコンテキストで、元の描画操作を実行できます.
例:
2つ目は3 Dコンテキスト、すなわちWebGLコンテキストである.WebGLはOpenGLES 2から.0ブラウザに移植する、OpenGLES 2.0は、ゲーム開発者がコンピュータのグラフィック画像を作成する際によく使用する言語です.WebGLは2 Dコンテキストよりも豊富で強力なグラフィック画像処理能力をサポートし、
例:
しかし、WebGLでは、Firefox 4+とChromeだけがサポートしています.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Canvas title>
<style>
canvas{
border: 1px solid dodgerblue;
}
style>
head>
<body>
<canvas id="drawing1" width="200" height="200"> canvas。canvas>
<canvas id="drawing2" width="200" height="200"> canvas。canvas>
<canvas id="drawing3" width="200" height="200"> canvas。canvas>
<canvas id="drawing4" width="200" height="200"> canvas。canvas>
<canvas id="drawing5" width="200" height="200"> canvas。canvas>
<canvas id="drawing6" width="600" height="200"> canvas。canvas>
<img src="result.png" id="result" hidden/>
<script src="l15.js">script>
body>
html> /**
* Canvas
*/
/**
* 15.1
*/
//
var drawing1=document.getElementById("drawing1");
//
if(drawing1.getContext){
var context1=drawing1.getContext("2d");
var imageElem=document.getElementById("result");
context1.drawImage(imageElem,10,10,180,180);
}
/**
*15.2 2D
*/
//15.2.1
//15.2.2
var drawing2=document.getElementById("drawing2");
if(drawing2.getContext){
var context2=drawing2.getContext("2d");
//
context2.fillStyle="#ff0000";
context2.fillRect(10,10,50,50);
//
context2.fillStyle="rgba(0,0,255,0.5)";
context2.fillRect(50,50,50,50);
//
context2.strokeStyle="#ff0000";
context2.strokeRect(130,10,50,50);
//
context2.strokeStyle="rgba(0,0,255,0.5)";
context2.strokeRect(130,70,50,50);
// lineWidth、lineCap、lineJoin
context2.lineWidth=2;
//
context2.clearRect(50,50,10,10);
}
//15.2.3
//15.2.4
//15.2.5
// ：
var drawing3=document.getElementById("drawing3");
if(drawing3.getContext){
var context3=drawing3.getContext("2d");
//
context3.beginPath();
//
context3.arc(100,100,99,0,2*Math.PI,false);
//
context3.moveTo(194,100);
context3.arc(100,100,94,0,2*Math.PI,false);
//
context3.font="bold 14px Arial";
context3.textAlign="center";
context3.textBaseline="middle";
context3.fillText("12",100,20);
context3.fillText("3",180,100);
context3.fillText("6",100,180);
context3.fillText("9",20,100);
//
context3.translate(100,100);
//
context3.rotate(1);
//
context3.moveTo(0,0);
context3.lineTo(0,-85);
//
context3.moveTo(0,0);
context3.lineTo(-65,0);
//
context3.stroke();
}
//15.2.6
//15.2.7
var context4=document.getElementById("drawing4").getContext("2d");
//
context4.shadowOffsetX=5;
context4.shadowOffsetY=5;
context4.shadowBlur=4;
context4.shadowColor="rgba(0,0,0,0.5)";
//
context4.fillStyle="#ff0000";
context4.fillRect(10,10,50,50);
//
context4.fillStyle="rgba(0,0,255,1)";
context4.fillRect(30,30,50,50);
//15.2.8
var context5=document.getElementById("drawing5").getContext("2d");
var gradient=context5.createLinearGradient(30,30,70,70);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");
//
context5.fillStyle="#ff0000";
context5.fillRect(10,10,50,50);
//
context5.fillStyle=gradient;
context5.fillRect(30,30,50,50);
//15.2.9
var context6=document.getElementById("drawing6").getContext("2d");
var imageEle=document.getElementById("result");
var pattern=context6.createPattern(imageEle,"repeat");
//
context6.fillStyle=pattern;
context6.fillRect(0,0,560,150);
//15.2.10
//getImageData()、putImageData()
//15.2.11
//globalAlpha、globalCompositionOperation
/**
* 15.3 WebGL
*/
// ， 。 原作者の苦労の総括に感謝します!原文住所:
http://blog.csdn.net/bboyjoe/article/details/50381006