JS+H5+キャンバス描画チュートリアル-jsチュートリアル-php.cn

JS+H5+キャンバス描画チュートリアル

php中世界最好的语言

リリース： 2018-04-18 11:44:15

オリジナル

1130 人が閲覧しました

今回はJS+H5+canvasで絵を描くチュートリアルをご紹介します。 JS+H5+canvasで絵を描く際の注意点を実際に見てみましょう。

デモ.js

window.onload=function() {
  createcanvas();
  drawImage();
}
 function createcanvas() {
   var CANVAS=document.getElementById('mycanvas');
   context=CANVAS.getContext('2d');
 }
function drawImage() {
  var img=new Image();
  img.onload=function() {
    context.drawImage(img,0,0,200,200 );
  }
  img.src="img5.jpg";
}

ログイン後にコピー

デモ.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
 
  <script type="text/javascript" src="demo.js"></script>
</head>
<body>
  <canvas id="mycanvas"  width="400" hight="400" >
<span>你的浏览器不支持canvas</span>
</canvas>
</body>
</html>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSはリストをツリー構造に変換します

JSはWebページ上で画像をドラッグできるようにします

React Native コンポーネントのライフサイクルはどれくらいですか

以上がJS+H5+キャンバス描画チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。