ホームページ > 記事 > ウェブフロントエンド > html5 Canvasの基本機能をサンプルコードで共有
html5 Canvasの基本機能をサンプルコードで共有
- 黄舟オリジナル
- 2017-03-28 15:53:071569ブラウズ
プロパティ
とcanvasのメソッドの紹介: width、height 、getContext() など;
widthおよび height を通じて現在のキャンバスの幅と高さを取得および設定します。 getContext() を通じて現在のキャンバスの描画環境 (コンテキスト) を取得します。 メソッド;
context= Canvas.getContext("2d");contextには、キャンバス上に描画する必要があるすべてのメソッドと属性が含まれています。原点から右へは の正の方向です
現在の状態は実際には描画状態のスタックであり、グローバルからキャンバス全体に適用されます。スコープ;
次の状態を操作できます:
変換行列 (変換行列)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>s3</title>
<script type="text/javascript" src="../script/modernizr-latest.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function() {
};
Debugger.log = function(message) {
try {
console.log(message);
} catch (exception) {
return;
}
}
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport() {
return Modernizr.canvas;
}
function eventWindowLoaded() {
canvasApp();
}
function canvasApp() {
if(!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
function drawScreen() {
//以下代码来源于<http://www.cnblogs.com/nothingbrother/archive/2011/12/23/2299856.html>
for(var x = 0.5; x < 550; x += 10) {
context.moveTo(x, 0);
context.lineTo(x, 400);
}
for(var y = 0.5; y < 400; y += 10) {
context.moveTo(0, y);
context.lineTo(550, y);
}
context.strokeStyle = "#cecece";
context.stroke();
context.beginPath();
context.moveTo(50, 150);
context.lineTo(300, 150);
context.moveTo(250, 100);
context.lineTo(300, 150);
context.moveTo(300, 50);
context.lineTo(250, 100);
context.moveTo(450, 200);
context.lineTo(300, 50);
/*symmetry*/
context.moveTo(50, 250);
context.lineTo(300, 250);
context.moveTo(250, 300);
context.lineTo(300, 250);
context.moveTo(300, 350);
context.lineTo(250, 300);
context.moveTo(450, 200);
context.lineTo(300, 350);
/*end*/
context.moveTo(50, 150);
context.lineTo(50, 250);
/*write coordinate*/
context.font = "bold 12px sans-serif";
context.fillText("( 0 , 0 )", 8, 5);
context.fillText("(50, 150)", 58, 155);
context.fillText("(300, 150)", 308, 155);
context.fillText("(250, 100)", 258, 105);
context.fillText("(300, 150)", 308, 155);
context.fillText("(300, 50)", 308, 55);
context.fillText("(50, 250)", 58, 255);
context.fillText("(300, 250)", 308, 255);
context.fillText("(250, 350)", 258, 355);
context.fillText("(450, 200)", 458, 205);
context.strokeStyle = "#f00";
context.stroke();
}
drawScreen();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="550" height="400">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>メソッド:clip()
コンテキストのプロパティ (コンテキストプロパティ) )
Methods:scale, rotate, transform, and translate最初に簡単に見てみましょう。後で説明します。今後の記事で、これらの属性とメソッドの使用法をゆっくりと分析します。
外国人 [oreilly によって書かれた小さなプログラム (文字を推測する)] ]: りー
以上がhtml5 Canvasの基本機能をサンプルコードで共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。