이 글에서는 주로 js HTML5 캔버스로 그림을 그리는 방법을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.
이 글의 예는 누구나 사용할 수 있도록 HTML5 캔버스로 그림을 그리는 구체적인 코드를 공유합니다. 참고로 구체적인 내용은 다음과 같습니다
demo.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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" ;
}
|
로그인 후 복사
demo.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!