집 >웹 프론트엔드 >JS 튜토리얼 >js+HTML5에서 캔버스를 사용하여 그림을 그리는 방법에 대한 자세한 설명

js+HTML5에서 캔버스를 사용하여 그림을 그리는 방법에 대한 자세한 설명

巴扎黑원래의: 2017-09-09 10:12:341732검색

이 글에서는 주로 js HTML5 캔버스로 그림을 그리는 방법을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

이 글의 예는 누구나 사용할 수 있도록 HTML5 캔버스로 그림을 그리는 구체적인 코드를 공유합니다. 참고로 구체적인 내용은 다음과 같습니다

demo.js

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

demo.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>

사진:

효과:

위 내용은 js+HTML5에서 캔버스를 사용하여 그림을 그리는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：마크다운 편집기에 대한 간략한 소개다음 기사：마크다운 편집기에 대한 간략한 소개