HTML5 キャンバス学習の紹介例-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 キャンバス学習の紹介例

零下一度

Jun 30, 2017 pm 03:30 PM

canvas h5 html5

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 までご連絡ください。