IE 6,7,8 で Canvas を使う †
- Google の explorcanvas を使う http://code.google.com/p/explorercanvas/ 。ダウンロードした excanvas.js を次のように指定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson5</title>
<style type="text/css">
- IE9 から Canvas に対応しているので、[if lte IE 8.0] にする
- IE9 で Canvas を有効化するためには HTML 5 宣言をする必要がある (<!DOCTYPE html>)
lesson1 線を引く †
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson1</title>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
draw();
}
function draw() {
// 1. canvas 取得
var canvas = document.getElementById('canvassample');
// 2. canvas 対応チェック
if ( ! canvas || ! canvas.getContext ) {
return false;
}
// 3. 2d context 取得 (今のところ 2d しかない)
var ctx = canvas.getContext('2d');
// 4. Path 開始
ctx.beginPath();
// 5. (20,20) へ移動
ctx.moveTo(20, 20);
// 6. 現在位置から (120,120) へ線を引く
ctx.lineTo(120, 120);
// 7. 画面に反映 (ctx.stroke() を呼び出すまで画面に表示されない)
ctx.stroke();
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
直線<br/>
<canvas id="canvassample" width="140" height="140"></canvas>
</body>
</html>
lesson2 閉曲線 †
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson2</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
draw(1);
draw(2);
draw(3);
draw(4);
}
function draw(exNum) {
var canvas = document.getElementById('canvassample' + exNum);
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
// Path開始
ctx.beginPath();
ctx.moveTo( 20, 20);
ctx.lineTo(100, 30);
switch(exNum) {
case 1:
ctx.strokeStyle = 'red';
ctx.lineTo(130, 130);
ctx.lineTo(10, 50);
break;
case 2:
ctx.strokeStyle = 'green';
// 中心(130,130) 半径 10 の円を通って (10, 50) 方向へ抜ける直前まで
ctx.arcTo(130, 130, 10, 50, 10);
ctx.lineTo(10, 50);
break;
case 3:
ctx.strokeStyle = 'blue';
// 始点 と (130,130) と (10,50) を通る二次曲線
ctx.quadraticCurveTo(130, 130, 10, 50);
break;
case 4:
ctx.strokeStyle = 'orange';
// 始点 と (100,130) と (130,100) と (10,50) を通る三次曲線
ctx.bezierCurveTo(100, 130, 130, 100, 10, 50);
}
// Path終了 : 始点(10,50)-終点(20,20) を直線で結んで閉曲線にする
ctx.closePath();
ctx.stroke();
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
<table border="0">
<tbody>
<tr>
<td>直線:<br/><canvas id="canvassample1" width="140" height="140"></canvas></td>
<td>円弧:<br/><canvas id="canvassample2" width="140" height="140"></canvas></td>
<td>2次ペジェ曲線: <br/><canvas id="canvassample3" width="140" height="140"></canvas></td>
<td>3次ペジェ曲線: <br/><canvas id="canvassample4" width="140" height="140"></canvas></td>
</tr>
</tbody>
</table>
</body>
</html>
lesson3 塗りつぶし・色 †
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson2</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
draw(1);
draw(2);
draw(3);
draw(4);
}
function draw(exNum) {
var canvas = document.getElementById('canvassample' + exNum);
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
// Path開始
ctx.beginPath();
ctx.moveTo( 20, 20);
ctx.lineTo(100, 30);
switch(exNum) {
case 1:
// 線の描画色を赤色にする
ctx.strokeStyle = 'red';
ctx.lineTo(130, 130);
ctx.lineTo(10, 50);
break;
case 2:
// 線の描画色を緑色にする
ctx.strokeStyle = 'green';
ctx.arcTo(130, 130, 10, 50, 10);
ctx.lineTo(10, 50);
break;
case 3:
// 線の描画色を青色にする
ctx.strokeStyle = 'blue';
ctx.quadraticCurveTo(130, 130, 10, 50);
break;
case 4:
// 線の描画色をオレンジ色にする
ctx.strokeStyle = 'orange';
ctx.bezierCurveTo(100, 130, 130, 100, 10, 50);
}
ctx.closePath();
// 塗りつぶし色をアイボリーにする
ctx.fillStyle = 'ivory';
// 塗りつぶし
ctx.fill();
ctx.stroke();
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
<table border="0">
<tbody>
<tr>
<td>直線:<br/><canvas id="canvassample1" width="140" height="140"></canvas></td>
<td>円弧:<br/><canvas id="canvassample2" width="140" height="140"></canvas></td>
<td>2次ペジェ曲線: <br/><canvas id="canvassample3" width="140" height="140"></canvas></td>
<td>3次ペジェ曲線: <br/><canvas id="canvassample4" width="140" height="140"></canvas></td>
</tr>
</tbody>
</table>
</body>
</html>
- 色は、CSS の color 形式。"#ffffff", "rgb(255,255,255)", "rgba(255,255,255,1.0)", "red" の文字列で指定する
lesson4 矩形 †
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson4</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
draw();
}
function draw() {
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
// (20,20) から 縦60、横60 の矩形を塗りつぶす
ctx.fillRect(20, 20, 60, 60);
// (40,40) から 縦60、横60 の矩形をクリアする
ctx.clearRect(40, 40, 60, 60);
// (40,40) から 縦60、横60 の矩形を縁取りする
ctx.strokeRect(40, 40, 60, 60);
// これらは、
// ctx.beginPath();
// ctx.rect(x,y,widht,height);
// ctx.stroke();
// などと同等
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
矩形<br/>
<canvas id="canvassample" width="200" height="200"></canvas>
</body>
</html>
lesson5 円弧、複数の色で塗り分け †
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson5</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
draw();
}
function draw() {
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
// ※ ここでは、context はデフォルト状態 (線色＝黒、塗りつぶし＝白)
ctx.save(); // 現在の context の状態を退避する
// -▼--------- ここから、線色＝赤、塗りつぶし＝ピンク ---------▼-
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.fillStyle = 'pink';
// 中心 (100,100) 半径 50 の円弧。
// 開始角 1.5π(270°) 終了角 1.8π(324°) 時計回り。
// 0°は東方向
ctx.arc(100,100,50,1.5 * Math.PI,1.8 * Math.PI);
// 中心 (100,100) まで線を引く
ctx.lineTo(100,100);
// (100,100) からこのPathの開始点（=円弧の開始点)まで線を引いて閉曲線にする
ctx.closePath();
ctx.stroke();
ctx.fill();
// -▲--------- ここまで、線色＝赤、塗りつぶし＝ピンク ---------▲-
ctx.restore(); // context の状態を復元する
// ※ ここでは、context はデフォルト状態 (線色＝黒、塗りつぶし＝白)
ctx.save(); // 現在の context の状態を退避する
// -▼--------- ここから、線色＝青、塗りつぶし＝シアン ---------▼-
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.fillStyle = 'cyan';
// 中心 (100,100) 半径 50 の円弧。
// 開始角 1.5π(270°) 終了角 1.8π(324°) "反"時計回り。
// 第六引数は anticlockwise (反時計回りフラグでデフォルト値 false)
ctx.arc(100,100,50,1.5 * Math.PI,1.8 * Math.PI,true);
ctx.lineTo(100,100);
ctx.closePath();
ctx.stroke();
ctx.fill();
// -▲--------- ここまで、線色＝青、塗りつぶし＝シアン ---------▲-
ctx.restore(); // context の状態を復元する
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
円弧、複数の色で塗り分け<br/>
<canvas id="canvassample" width="200" height="200"></canvas>
</body>
</html>
- Canvas では、現時点での context (文脈) を使って描画を行う
- 一つの図形を書くときには ctx.save() で現在の context を待避し、書き終わったら ctx.restore() で元に戻すのが一般的なやり方
ctx.save();
ctxに属性を付加する(色など)
なんか書く
ctx.restore();
ctx.save();
ctxに属性を付加する(線の太さなど)
なんか書く
ctx.restore();
- ctx.save() / ctx.restore() はスタックなので、共通的な定義を入れ子で書ける
ctx.save()'
ctx.font = '20px sans-serif';
ctx.save();
ctxに属性を付加する(色など)
なんか書く
ctx.restore();
ctx.save();
ctxに属性を付加する(線の太さなど)
なんか書く
ctx.restore();
ctx.restore()
lesson6 透明色 †
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson6</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
draw();
}
function draw() {
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
ctx.save();
ctx.strokeStyle = 'red';
ctx.fillStyle = 'pink';
ctx.beginPath();
ctx.arc(75,75,50,0,2*Math.PI);
ctx.stroke();
ctx.fill();
ctx.restore();
ctx.save();
ctx.strokeStyle = 'blue';
ctx.fillStyle = 'rgba(80,80,255,0.5)';
ctx.beginPath();
ctx.rect(75,75,100,100);
ctx.stroke();
ctx.fill();
ctx.restore();
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
透明色<br/>
<canvas id="canvassample" width="200" height="200"></canvas>
</body>
</html>
lesson7 文字 (align, baseline, stroke, fill) + canvasの大きさ取得 †
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson7</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
draw();
}
function draw() {
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
// 画面全体にガイドラインを引く
// 横長 : canvas.width
// 縦長 : canvas.height
ctx.save();
ctx.strokeStyle = 'rgb(200,200,200)';
for( y = 30; y < canvas.height; y+=30 ){
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
ctx.stroke();
}
ctx.beginPath();
ctx.moveTo(200,0);
ctx.lineTo(200,canvas.height);
ctx.stroke();
ctx.restore();
// テキストの属性を変えて表示してみる
ctx.font = '15px monospace';
y = 30;
['start','end','left','right','center'].forEach(function(textAlign){
ctx.save();
ctx.textAlign = textAlign;
ctx.fillText(textAlign + ',alphabetic', 200, y);
ctx.restore();
y += 30;
});
['top','hanging','middle','alapabetic','ideographic','bottom'].forEach(function(textBaseline){
ctx.save();
ctx.textBaseline = textBaseline;
ctx.fillText('start,' + textBaseline, 200, y);
ctx.restore();
y += 30;
});
ctx.save();
ctx.strokeStyle = 'red';
ctx.strokeText('Stroke Text', 200, y);
ctx.restore();
y += 30;
ctx.save();
ctx.fillStyle = 'blue';
ctx.fillText('Fill Text', 200, y);
ctx.restore();
y += 30;
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
文字 (align, baseline, stroke, fill) + canvasの大きさ取得 <br/>
<canvas id="canvassample" width="400" height="400"></canvas>
</body>
</html>
lesson8 文字 (font, maxwidth, 表示幅の推定) †
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson8</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
draw();
}
function draw() {
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
ctx.save();
ctx.strokeStyle = 'rgb(200,200,200)';
for( y = 10; y < canvas.height; y+=10 ){
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
ctx.stroke();
}
for( x = 10; x < canvas.width; x+=10 ){
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
}
ctx.restore();
var SAMPLE_TXT = 'ずっと夢を見て安心してた';
y = 30;
y = setText(ctx, SAMPLE_TXT, '22px sans-serif', y);
y = setText(ctx, SAMPLE_TXT, '22px serif', y);
y = setText(ctx, SAMPLE_TXT, '22px monospace', y);
y = setText(ctx, SAMPLE_TXT, '22px \'ヒラギノ角ゴ Pro W3\',\'メイリオ\',sans-serif', y);
}
function setText(ctx, text, font, y) {
ctx.save();
ctx.font = font;
// TextMetrics : グラフィックとして表示されるときの表示属性
// 今のところ TextMetrics.width しかない
txtMetrics = ctx.measureText(text)
ctx.fillText(font, 30, y);
y += 30;
ctx.fillText(text, 50, y);
ctx.fillText(txtMetrics.width + 'px', 350, y);
y += 30;
// テキストの横幅を最大100pxに縮める
ctx.fillText(text, 50, y, 100);
ctx.fillText('100px (max width)', 350, y);
ctx.restore();
return y + 30;
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
文字 (font, maxwidth, 表示幅の推定) <br/>
<canvas id="canvassample" width="600" height="400"></canvas>
</body>
</html>
lesson9 重ね合わせ †
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson9</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
draw(0,'source-over');
draw(1,'source-in');
draw(2,'source-out');
draw(3,'source-atop');
draw(4,'destination-over');
draw(5,'destination-in');
draw(6,'destination-out');
draw(7,'destination-atop');
draw(8,'lighter');
draw(9,'copy');
draw(10,'xor');
draw2(11, 0.5);
}
function draw(num, op) {
var canvas = document.getElementById('canvassample' + num);
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
// 元画像 (青い四角)
ctx.save();
ctx.strokeStyle = 'yellow';
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.rect(25, 25, 100, 100);
ctx.stroke();
ctx.fill();
ctx.restore();
// 重ね合わせ方法の変更
ctx.globalCompositeOperation = op;
// 重ね合わせ画像 (赤い丸)
ctx.save();
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2*Math.PI);
ctx.fill();
ctx.restore();
// ※ 重要 ※
// 重ね合わせ方法をデフォルトに戻す
// globalCompositeOperation は、global なので、save()/restore()
// では元に戻らない
ctx.globalCompositeOperation = 'source-over';
ctx.save();
ctx.font = '20px monospace';
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
ctx.fillText(op, canvas.width / 2, 0);
ctx.restore;
}
function draw2(num, alpha) {
var canvas = document.getElementById('canvassample' + num);
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
// α値の変更
ctx.globalAlpha = alpha;
// 元画像 (青い四角)
ctx.save();
ctx.strokeStyle = 'yellow';
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.rect(25, 25, 100, 100);
ctx.stroke();
ctx.fill();
ctx.restore();
// 重ね合わせ画像 (赤い丸)
ctx.save();
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2*Math.PI);
ctx.fill();
ctx.restore();
// ※ 重要 ※
// 重ね合わせ方法をデフォルトに戻す
// globalAlpha は、global なので、save()/restore()
// では元に戻らない
ctx.globalAlpha = 1;
ctx.save();
ctx.font = '20px monospace';
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
ctx.fillText('globalAlpha', canvas.width / 2, 0);
ctx.restore;
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
<table border="0">
<tbody>
<tr>
<td><canvas id="canvassample0" width="200" height="200"></canvas></td>
<td><canvas id="canvassample1" width="200" height="200"></canvas></td>
<td><canvas id="canvassample2" width="200" height="200"></canvas></td>
<td><canvas id="canvassample3" width="200" height="200"></canvas></td>
</tr>
<tr>
<td><canvas id="canvassample4" width="200" height="200"></canvas></td>
<td><canvas id="canvassample5" width="200" height="200"></canvas></td>
<td><canvas id="canvassample6" width="200" height="200"></canvas></td>
<td><canvas id="canvassample7" width="200" height="200"></canvas></td>
</tr>
<tr>
<td><canvas id="canvassample8" width="200" height="200"></canvas></td>
<td><canvas id="canvassample9" width="200" height="200"></canvas></td>
<td><canvas id="canvassample10" width="200" height="200"></canvas></td>
<td><canvas id="canvassample11" width="200" height="200"></canvas></td>
</tr>
</tbody>
</table>
</body>
</html>
lesson10 直線の端 †
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson10</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
draw();
}
function draw() {
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
ctx.save();
ctx.font = '15px sans-serif';
ctx.textBaseline = 'middle';
// 補助線
drawLine(ctx, 20, 0, 20, canvas.height, 1, 'butt' , 'red');
drawLine(ctx, 60, 0, 60, canvas.height, 1, 'butt' , 'pink');
drawLine(ctx, 70, 0, 70, canvas.height, 1, 'butt' , 'pink');
drawLine(ctx, 80, 0, 80, canvas.height, 1, 'butt' , 'red');
drawLine(ctx, 90, 0, 90, canvas.height, 1, 'butt' , 'pink');
drawLine(ctx, 100, 0, 100, canvas.height, 1, 'butt' , 'pink');
// lineCap
drawLine(ctx, 20, 20, 80, 20, 15, 'butt' , 'gray', 'butt cap (default)');
drawLine(ctx, 20, 40, 80, 40, 15, 'round' , 'gray', 'round cap');
drawLine(ctx, 20, 60, 80, 60, 15, 'square', 'gray', 'square cap');
// lineJoin
drawJoin(ctx, 20, 100, 80, 120, 20, 140, 15, 'round', 'gray', 'round join');
drawJoin(ctx, 20, 160, 80, 180, 20, 200, 15, 'bevel', 'gray', 'bevel join');
drawJoin(ctx, 20, 220, 80, 240, 20, 260, 15, 'miter', 'gray', 'miter join (default)');
// miterLimit
// miter join のとき、とんがり部分が、miterLimi * (lineWidth / 2) 以上になると
// とんがり部分が削られて bevel と同じ描画結果になる (デフォルト値は10)
ctx.save();
ctx.miterLimit = 3.0;
drawJoin(ctx, 20, 280, 80, 300, 20, 320, 15, 'miter', 'gray', 'miterLimit = 3.0');
ctx.restore();
ctx.save();
ctx.miterLimit = 4.0;
drawJoin(ctx, 20, 340, 80, 360, 20, 380, 15, 'miter', 'gray', 'miterLimit = 4.0');
ctx.restore();
ctx.restore();
}
function drawLine(ctx, x1, y1, x2, y2, width, cap, color, title) {
ctx.save();
ctx.lineWidth = width;
ctx.lineCap = cap;
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
ctx.restore();
if(title) {
ctx.fillText(title, x2 + 30, y2);
}
}
function drawJoin(ctx, x1, y1, x2, y2, x3, y3, width, join, color, title) {
ctx.save();
ctx.lineWidth = width;
ctx.lineJoin = join;
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.stroke();
ctx.restore();
if(title) {
ctx.fillText(title, x2 + 30, y2);
}
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
直線<br/>
<canvas id="canvassample" width="300" height="400"></canvas>
</body>
</html>
lesson11 グラデーション、パターン †
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson4</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
var DIR_H = 1; // 01(2)
var DIR_W = 2; // 10(2)
var FILL_IMG = new Image();
window.onload = function() {
// 塗りつぶし用パターンの読み込み
FILL_IMG.src = "tile.png?" + new Date().getTime();
FILL_IMG.onload = function() {
draw();
}
}
function draw() {
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
// ----- 横方向のグラデーション
drawLinearGradient(ctx, 0, 0, 90, 90, DIR_W, 'darkred','red','darkred');
// ----- 縦方向のグラデーション
drawLinearGradient(ctx, 100, 0, 90, 90, DIR_H, 'darkred','red','darkred');
// ----- ななめ方向のグラデーション
drawLinearGradient(ctx, 200, 0, 90, 90, DIR_H + DIR_W, 'darkred','red','darkred');
// ----- 円形のグラデーション
drawRadialGradient(ctx);
// ----- パターン塗りつぶし
drawPatternFill(ctx);
}
function drawLinearGradient(ctx, x, y, w, h, dir, c1, c2, c3) {
ctx.save();
var gStartX = x;
var gStartY = y;
var gEndX = ((dir & DIR_W) == DIR_W) ? (x + w) : x;
var gEndY = ((dir & DIR_H) == DIR_H) ? (y + h) : y;
// グラデーションのガイドとなる直線を引数に CanvasGradient オブジェクトを作る
var grad = ctx.createLinearGradient(gStartX, gStartY, gEndX, gEndY);
// ガイド上の色を案分する (gStartX,gStartY)=c1, (gEndX,gEndY)=c1c3, 真ん中:c2)
grad.addColorStop(0.0, c1);
grad.addColorStop(0.5, c2);
grad.addColorStop(1.0, c3);
// 塗りつぶし色に CanvasGradient オブジェクトを設定
ctx.fillStyle = grad;
// 後は普通の閉曲線の塗りつぶし
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.closePath();
ctx.fill();
ctx.restore();
}
function drawRadialGradient(ctx) {
ctx.save();
// グラデーションのガイドとなる二つの円を引数に CanvasGradient オブジェクトを作る
// 内周 中心(145,145) 半径 5
// 外周 中心(145,145) 半径 45
var grad = ctx.createRadialGradient(45, 145, 5, 45, 145, 45);
// 内周の色と外周の色と、中間地点の色を設定する
// 内周の内側は内周の色、外周の外側は外周の色になる
grad.addColorStop(0.0, 'darkred');
grad.addColorStop(0.5, 'red');
grad.addColorStop(1.0, 'darkred');
// 塗りつぶし色に CanvasGradient オブジェクトを設定
ctx.fillStyle = grad;
// 後は普通の閉曲線の塗りつぶし
ctx.beginPath();
ctx.rect(0, 100, 90, 90);
ctx.closePath();
ctx.fill();
ctx.restore();
}
function drawPatternFill(ctx) {
ctx.save();
// Image の繰り返しで塗りつぶす CanvasPattern オブジェクトを作る
// 繰り返しのデフォルト値は 'repeat' (第二引数未指定で 'repeat')。
// そのほかに 'repeat-x', 'repeat-y', 'no-repeat'を指定できる。
var ptrn = ctx.createPattern(FILL_IMG, 'repeat');
// 塗りつぶし色に CanvasPattern オブジェクトを設定
ctx.fillStyle = ptrn;
// 後は普通の閉曲線の塗りつぶし
ctx.beginPath();
ctx.arc(145, 145, 45, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.restore();
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
グラデーション<br/>
<canvas id="canvassample" width="300" height="200"></canvas>
</body>
</html>
lesson12 Image †
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson12</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
var GIT_IMG = new Image();
window.onload = function() {
// 描画イメージの読み込み
GIT_IMG.src = "git.png?" + new Date().getTime();
GIT_IMG.onload = function() {
draw();
}
}
function draw() {
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
// (10,10) に画像を描画
ctx.fillText('元画像', 10, 8);
ctx.drawImage(GIT_IMG, 10, 10);
// (10,270) に 横幅 GIT_IMG.width * 0.5 , 縦長 GIT_IMG.height * 0.5 に拡大・縮小して描画
ctx.fillText('拡大縮小', 10, 268);
ctx.drawImage(GIT_IMG, 10, 270, GIT_IMG.width * 0.5 , GIT_IMG.height * 0.5);
// 元画像の (10,10)-(160,100) を (180,270) に 横幅 150, 縦長 100 に拡大・縮小して表示
ctx.fillText('トリミング', 180, 268);
ctx.drawImage(GIT_IMG, 10, 10, 160, 100, 180, 270, 150, 100);
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
イメージ<br/>
<canvas id="canvassample" width="400" height="400"></canvas>
</body>
</html>
- ctx.drawImage(img, x, y) には、HTMLImageElement? のほかに HTMLCanvasElement?、HTMLVideoElement? を指定できる
lesson13 ピクセル操作 †
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson13</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
draw();
}
function draw() {
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
// 図形の描画
ctx.save();
ctx.strokeStyle = 'red';
ctx.fillStyle = 'pink';
ctx.beginPath();
ctx.arc(75,75,50,0,2*Math.PI);
ctx.stroke();
ctx.fill();
ctx.restore();
ctx.save();
ctx.strokeStyle = 'blue';
ctx.fillStyle = 'cyan';
ctx.beginPath();
ctx.rect(75,75,100,100);
ctx.stroke();
ctx.fill();
ctx.restore();
// (30,30)-(90,90) の範囲を ImageData として取得
// 横幅 imgData.width / 縦長 imgData.height
var imgData = ctx.getImageData(10,50,175,100);
// ImageData から CanvasPixelArray を取得して、単色化する
// 0123 4567 89...
// RGBA RGBA RG... (それぞれ 0〜255)
var pixArray = imgData.data;
for(cnt = 0; cnt < pixArray.length; cnt+=4){
var red = pixArray[cnt];
var green = pixArray[cnt+1];
var blue = pixArray[cnt+2];
var alpha = pixArray[cnt+3];
var brightness = (red + green + blue) / 3;
var row = Math.floor(cnt / 4 / imgData.width);
if (row < (imgData.height * 0.25)) {
pixArray[cnt] = brightness;
pixArray[cnt+1] = brightness * 0.7;
pixArray[cnt+2] = brightness * 0.7;
} else if (row < (imgData.height * 0.5)) {
pixArray[cnt] = brightness * 0.7;
pixArray[cnt+1] = brightness;
pixArray[cnt+2] = brightness * 0.7;
} else if (row < (imgData.height * 0.75)) {
pixArray[cnt] = brightness * 0.7;
pixArray[cnt+1] = brightness * 0.7;
pixArray[cnt+2] = brightness;
} else {
pixArray[cnt] = brightness;
pixArray[cnt+1] = brightness;
pixArray[cnt+2] = brightness;
}
pixArray[cnt+3] = alpha;
}
// ImageData を canvas に貼り付ける
ctx.putImageData(imgData,200,50);
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
ピクセル操作<br/>
<canvas id="canvassample" width="400" height="200"></canvas>
</body>
</html>
- canvas に表示されている内容を imagedata として取り出す
imagedata = context . getImageData(sx, sy, sw, sh);
- imagedata を新たに作成する
imagedata = context . createImageData(sw, sh);
- imagedata から imagedata を作成する (コピー)
imagedata = context . createImageData(imagedata);
- context . putImageData?(imagedata, dx, dy) で、image 全体を canvas に貼り付けるほかに、クリッピングして貼り付けることができる
context . putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ])
lesson14 閉曲線の内側？外側？ †
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson14</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
draw();
}
function draw() {
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
// 円を塗りつぶす
ctx.save();
ctx.strokeStyle = 'red';
ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.arc(75,75,50,0,2*Math.PI);
ctx.stroke();
ctx.fill();
for (x = 0; x < canvas.width; x+=20) {
for (y = 0; y < canvas.height; y+=20) {
// context のカレントパスは円
// (x,y) が 円 の内側か外側かを判定
if (ctx.isPointInPath(x,y)) {
// context のカレントパスを待避 <-- 重要
ctx.save();
ctx.fillStyle = 'lightgreen';
ctx.fillRect(x,y,5,5);
// ※ この時点での context のカレントパスは黄緑色の四角
ctx.restore();
// context のカレントパスを円に戻す <-- 重要
} else {
// context のカレントパスを待避 <-- 重要
ctx.save();
ctx.fillStyle = 'pink';
ctx.fillRect(x,y,5,5);
// ※ この時点での context のカレントパスはピンク色の四角
ctx.restore();
// context のカレントパスを円に戻す <-- 重要
}
}
}
ctx.restore();
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
閉曲線の内側？外側？<br/>
<canvas id="canvassample" width="200" height="200"></canvas>
</body>
</html>
lesson15 Transform †
- context.transform(m11, m12, m21, m22, dx, dy)
- すでに描画されている図形を移動するのではなく、context の座標系を移動する (普通にイメージする操作と違う)
- transform() を実行したあとに図形を描画すると、移動された座標系で描画される
\(\left(
\begin{array}{c}
x' \\
y' \\
1
\end{array}
\right)
=
\left(
\begin{array}{ccc}
m_{11} & m_{21} & d_{x} \\
m_{12} & m_{22} & d_{y} \\
0 & 0 & 1
\end{array}
\right)
\left(
\begin{array}{c}
x \\
y \\
1
\end{array}
\right)
\)
- 原点中心の回転＋平行移動
\(\left(
\begin{array}{ccc}
cos\theta & -sin\theta & d_{x} \\
sin\theta & con\theta & d_{y} \\
0 & 0 & 1
\end{array}
\right)
\)
※グラフィックでは Y 軸が下向き
- 原点中心の拡大・縮小＋平行移動
\(\left(
\begin{array}{ccc}
s_{x} & 0 & d_{x} \\
0 & s_{y} & d_{y} \\
0 & 0 & 1
\end{array}
\right)
\)
- 平行移動
\(\left(
\begin{array}{ccc}
1 & 0 & d_{x} \\
0 & 1 & d_{y} \\
0 & 0 & 1
\end{array}
\right)
\)
- context.transform() を 2 回実行すると、それらが掛け合わされた座標系になる
context.transform(m11, m12, m21, m22, dx, dy);
context.transform(n11, n12, n21, n22, dx, dy);
- context に、指定した変換行列のみを設定したい場合には setTransform(m11, m12, m21, m22, dx, dy); を使う
- 回転、拡大・縮小、移動の変換行列を設定するラッパー関数がある
- 回転 context.rotate(angle);
- 拡大 context.scale(x, y);
- 移動 context.translate(x, y);
- サンプルプログラム
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson4</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
draw();
}
function draw() {
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
// 赤：元の矩形
ctx.strokeStyle = 'red';
ctx.strokeRect(60, 20, 100, 40); // strokeRect で指定する矩形の座標は同じ (座標系が移動している!!)
// 青：0.1π 回転
ctx.rotate(0.1 * Math.PI);
ctx.strokeStyle = 'blue';
ctx.strokeRect(60, 20, 100, 40); // strokeRect で指定する矩形の座標は同じ (座標系が移動している!!)
// 緑：(120,0) 平行移動
ctx.translate(120, 0);
ctx.strokeStyle = 'green';
ctx.strokeRect(60, 20, 100, 40); // strokeRect で指定する矩形の座標は同じ (座標系が移動している!!)
// 橙：横方向に 0.5 倍、縦方向に 2.0 倍
ctx.scale(0.5, 2.0);
ctx.strokeStyle = 'orange';
ctx.strokeRect(60, 20, 100, 40); // strokeRect で指定する矩形の座標は同じ (座標系が移動している!!)
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
変形<br/>
<canvas id="canvassample" width="300" height="200"></canvas>
</body>
</html>
lesson16 Shadow †
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson16</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
draw();
}
function draw() {
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
drawCircle(ctx, 'green', 'darkgreen', 90 , 100);
drawCircle(ctx, 'blue' , 'darkblue' , 130, 50);
drawCircle(ctx, 'red' , 'darkred' , 50 , 50);
}
function drawCircle(ctx, color, shadow, x, y) {
ctx.save();
// ぼかしのレベル
ctx.shadowBlur = 10;
// ぼかしの幅
ctx.shadowOffsetX = 7;
ctx.shadowOffsetY = 7;
// ぼかしの色
ctx.shadowColor = shadow;
// 塗りつぶしの色
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, 50, 0, 2*Math.PI);
ctx.fill();
ctx.restore();
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
影<br/>
<canvas id="canvassample" width="200" height="200"></canvas>
</body>
</html>
lesson17 クリッピング †
閉曲線をクリップに指定すると、以降このクリップの中にしか描画が行われない
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson17</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
draw();
}
function draw() {
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
// 星形の閉曲線をクリップに指定
clipStar(ctx, 100, 90, 75, 30);
// 緑・青・赤の円を描く
drawCircle(ctx, 'green', 'darkgreen', 90 , 100);
drawCircle(ctx, 'blue' , 'darkblue' , 130, 50);
drawCircle(ctx, 'red' , 'darkred' , 50 , 50);
}
function clipStar(ctx, x, y, r1, r2) {
ctx.beginPath();
ctx.moveTo(x + r2 * Math.sin(0) , y + r2 * Math.cos(0));
var angle = 2 * Math.PI / 10;
for (cnt = 1; cnt < 10; cnt++) {
if (cnt % 2 == 0) {
ctx.lineTo(x + r2 * Math.sin(angle * cnt), y + r2 * Math.cos(angle * cnt));
} else {
ctx.lineTo(x + r1 * Math.sin(angle * cnt), y + r1 * Math.cos(angle * cnt));
}
}
ctx.closePath();
ctx.clip();
}
function drawCircle(ctx, color, shadow, x, y) {
ctx.save();
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 7;
ctx.shadowOffsetY = 7;
ctx.shadowColor = shadow;
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, 50, 0, 2*Math.PI);
ctx.fill();
ctx.restore();
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
クリッピング<br/>
<canvas id="canvassample" width="200" height="200"></canvas>
</body>
</html>
lesson18 dataURL †
HTML5 から <img src="data:image/png;base64,iVBORw0KGgoAAA..."/> のように、URL にバイナリデータを指定できるようになった。
canvas.toDataURL() は、canvas で描画されている内容を dataurl に変換する。
規格自体は 1998 年のものなのね
http://tools.ietf.org/html/rfc2397
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson18</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
window.onload = function() {
draw();
}
function draw() {
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
// canvas に図形を描画
var grad = ctx.createLinearGradient(0,0,canvas.width,0);
grad.addColorStop(0.0,'pink');
grad.addColorStop(0.5,'yellow');
grad.addColorStop(1.0,'cyan');
ctx.fillStyle = grad;
ctx.fillRect(0,0,canvas.width,canvas.height);
// canvas を dataURL にする
var dataurl = canvas.toDataURL();
document.getElementById('img').src = dataurl;
document.getElementById('txt').innerHTML = dataurl;
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
<fieldset style="width:400px">
<legend>Canvas</legend>
<canvas id="canvassample" width="100" height="16"></canvas>
</fieldset>
<fieldset style="width:400px">
<legend><img src="$dataURL"/></legend>
<img id="img"/><br/>
</fieldset>
<fieldset style="width:400px">
<legend>dataURL Text</legend>
<textarea id="txt" rows="5" cols="50"></textarea>
</fieldset>
</body>
</html>
lesson19 イベント †
マウスイベントから取得できる (x,y) は HTML 内の座標なので、canvas 内の座標を知るためには canvas の左上の座標を引く必要がある
var onMouseMove = function(e) {
var rect = e.target.getBoundingClientRect();
gMouseX = e.clientX - rect.left;
gMouseY = e.clientY - rect.top;
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!-- IE 6,7,8 で Canvas を使うための explorercanvas (http://code.google.com/p/explorercanvas/) -->
<!--[if lte IE 8.0]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<!-- IE 6,7,8 で Canvas を使う -->
<title>Lesson19</title>
<style>
</style>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
// グローバル領域
gCtx = null;
gScreenWidth = null;
gScreenHeight = null;
gStar = null;
gMouseX = null;
gMouseY = null;
window.onload = function() {
var canvas = document.getElementById('canvassample');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
gCtx = canvas.getContext('2d');
gScreenWidth = canvas.width;
gScreenHeight = canvas.height;
gStar = new Star();
// Canvas にマウスイベントを登録
canvas.addEventListener("mousemove", onMouseMove, false);
canvas.addEventListener("mouseout", onMouseOut, false);
run();
}
function run() {
gCtx.save();
gCtx.fillStyle = 'black';
gCtx.fillRect(0,0,gScreenWidth,gScreenHeight);
gCtx.restore();
gStar.update();
setTimeout(run, 100);
}
var onMouseMove = function(e) {
var rect = e.target.getBoundingClientRect();
gMouseX = e.clientX - rect.left;
gMouseY = e.clientY - rect.top;
};
var onMouseOut = function(e) {
gMouseX = null;
gMouseY = null;
};
function Star() {
this.initialize.apply(this, arguments);
}
Star.prototype = {
_x : 0,
_y : 0,
_diff : 0,
initialize : function() {
},
update : function() {
if (gMouseX && gMouseY) {
this._x += (gMouseX - this._x) * 0.7;
this._y += (gMouseY - this._y) * 0.7;
}
gCtx.save();
gCtx.globalCompositeOperation = "lighter";
gCtx.beginPath();
gCtx.moveTo(this._x + 10 * Math.sin(0) , this._y + 10 * Math.cos(0));
var angle = 2 * Math.PI / 10;
for (cnt = 1; cnt < 10; cnt++) {
if (cnt % 2 == 0) {
gCtx.lineTo(this._x + 10 * Math.sin(angle * cnt), this._y + 10 * Math.cos(angle * cnt));
} else {
gCtx.lineTo(this._x + 20 * Math.sin(angle * cnt), this._y + 20 * Math.cos(angle * cnt));
}
}
gCtx.closePath();
gCtx.strokeStyle = 'yellow';
gCtx.fillStyle = 'khaki';
gCtx.fill();
gCtx.stroke();
gCtx.restore();
}
}
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
マウス追随<br/>
<canvas id="canvassample" width="550" height="250"></canvas>
</body>
</html>
参考文献 †
HTML
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
lesson19.html 4216件
[詳細]
git.png 2667件
[詳細]
tile.png 2235件
[詳細]
