ホームページ > 記事 > ウェブフロントエンド > HTML5 キャンバス学習の紹介例
HTML5 キャンバス学習の紹介例
- 零下一度オリジナル
- 2017-06-30 15:30:331557ブラウズ
1.HTML5のCanvasタグの作成
window.onload = function(){
createCanvas();
} function createCanvas(){ var canvas_width= 200, canvas_height = 200;
document.body.innerHTML = "<canvas id=\"canvas\" width=\""+canvas_width+"\" height=\""+canvas_height+"\"></canvas>";
}2.HTML5Canvasタグでグラフィックを描画
var canvas_width= 500, canvas_height = 500;var mycanvas, context;
window.onload = function(){
createCanvas();
drawRect();
} function createCanvas(){
document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+canvas_width+"\" height=\""+canvas_height+"\"></canvas>";
mycanvas = document.getElementById("mycanvas");
context = mycanvas.getContext("2d");
}
function drawRect(){
context.fillStyle ="#FF0000"; //context.rotate(45);//旋转45度
//context.translate(200,200);//移动
//context.scale(2,0.5);//缩放
context.fillRect(0,0,200,200);
}3.HTML5Canvasタグで絵を描画
var canvas_width= 500, canvas_height = 500;var mycanvas, context;
window.onload = function(){
createCanvas();
drawImage();
} function createCanvas(){
document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+canvas_width+"\" height=\""+canvas_height+"\"></canvas>";
mycanvas = document.getElementById("mycanvas");
context = mycanvas.getContext("2d");
}
function drawImage(){ var img = new Image();
img.onload = function(){
context.drawImage(img,0,0);
}
img.src = "1.png";
}
以上がHTML5 キャンバス学習の紹介例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。