html5 Canvas의 기본 기능에 대한 샘플 코드 공유
- 黄舟원래의
- 2017-03-28 15:53:071569검색
캔버스 기본 속성 및 메소드: width, height, getContext() 등
은 width를 전달합니다. height 현재 캔버스의 너비와 높이를 가져오고 설정합니다.
getContext() 메서드를 통해 현재 캔버스의 그리기 환경(컨텍스트)을 가져옵니다.
context=canvas.getContext("2d");
context에는
컨텍스트의 데카르트 좌표계에서 캔버스에 그리는 데 필요한 모든 메서드와 속성이 포함되어 있습니다. , 캔버스 왼쪽 상단이 원점이며, 원점에서 오른쪽이 양의 방향입니다.
현재
상태와 함께 사용됩니다. 캔버스가 어떻게 작동하는지 진정으로 이해하기 전에 현재 상태는 숙지해야 하는 개념입니다. 현재 상태는 실제로 전체 캔버스에 적용되는 그리기 상태의 스택입니다.
다음 상태를 작동합니다:변환 행렬 행렬)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>s3</title>
<script type="text/javascript" src="../script/modernizr-latest.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function() {
};
Debugger.log = function(message) {
try {
console.log(message);
} catch (exception) {
return;
}
}
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport() {
return Modernizr.canvas;
}
function eventWindowLoaded() {
canvasApp();
}
function canvasApp() {
if(!canvasSupport()) {
return;
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
function drawScreen() {
//以下代码来源于<http://www.cnblogs.com/nothingbrother/archive/2011/12/23/2299856.html>
for(var x = 0.5; x < 550; x += 10) {
context.moveTo(x, 0);
context.lineTo(x, 400);
}
for(var y = 0.5; y < 400; y += 10) {
context.moveTo(0, y);
context.lineTo(550, y);
}
context.strokeStyle = "#cecece";
context.stroke();
context.beginPath();
context.moveTo(50, 150);
context.lineTo(300, 150);
context.moveTo(250, 100);
context.lineTo(300, 150);
context.moveTo(300, 50);
context.lineTo(250, 100);
context.moveTo(450, 200);
context.lineTo(300, 50);
/*symmetry*/
context.moveTo(50, 250);
context.lineTo(300, 250);
context.moveTo(250, 300);
context.lineTo(300, 250);
context.moveTo(300, 350);
context.lineTo(250, 300);
context.moveTo(450, 200);
context.lineTo(300, 350);
/*end*/
context.moveTo(50, 150);
context.lineTo(50, 250);
/*write coordinate*/
context.font = "bold 12px sans-serif";
context.fillText("( 0 , 0 )", 8, 5);
context.fillText("(50, 150)", 58, 155);
context.fillText("(300, 150)", 308, 155);
context.fillText("(250, 100)", 258, 105);
context.fillText("(300, 150)", 308, 155);
context.fillText("(300, 50)", 308, 55);
context.fillText("(50, 250)", 58, 255);
context.fillText("(300, 250)", 308, 255);
context.fillText("(250, 350)", 258, 355);
context.fillText("(450, 200)", 458, 205);
context.strokeStyle = "#f00";
context.stroke();
}
drawScreen();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="550" height="400">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
클리핑 영역(영역 클리핑)
방법 :clip()
컨텍스트 속성(컨텍스트 속성)
Methods:scale, rotate, transform, and translate먼저 간략하게 살펴보고 이러한 속성의 사용법을 천천히 분석해 보겠습니다. 향후 기사의 방법
작성: 외국 [oreilly] 작은 프로그램(문자 추측):
Properties: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, line Join, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, global CompositeOperation, font, textAlign, and textBaseline.
위 내용은 html5 Canvas의 기본 기능에 대한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.