3. Canvas에서 그림 그리기 2
10102 단어 canvas
drawTree
function drawTree(context) {
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
trunkGradient.addColorStop(0,'#663300');
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);
var canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();
context.fillStyle="#339900";
context.fill();
}
확대된 트리 코드 추가:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>drawTree</title>
</head>
<script>
function createCanopyPath (context) {
//
context.beginPath();
context.moveTo(-25,-50);
context.lineTo(-10,-80);
context.lineTo(-20,-80);
context.lineTo(-5,-110);
context.lineTo(-15,-110);
//
context.lineTo(0,-140);
context.lineTo(15,-110);
context.lineTo(5,-110);
context.lineTo(20,-80);
context.lineTo(10,-80);
context.lineTo(25,-50);
// ，
context.closePath();
}
function drawTree(context) {
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
trunkGradient.addColorStop(0,'#663300');
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);
var canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();
context.fillStyle="#339900";
context.fill();
}
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.translate(130,250);
drawTree(context);
context.restore();
// canvas
context.save();
context.translate(260,500);
context.scale(2,2);
drawTree(context);
context.restore();
context.translate(-10,350);
context.beginPath();
//
context.moveTo(0,0);
context.quadraticCurveTo(170,-50,260,-190);
//
context.quadraticCurveTo(310,-250,410,-250);
//
context.strokeStyle='#663300';
context.lineWidth=20;
context.stroke();
// canvas
context.restore();
}
window.addEventListener("load",drawTrails,true);
</script>
<body>
<canvas id="trails" style="border:1px solid;" width="400" height="600">
</canvas>
</body>
</html>
결과:
2. 그림자 더하기
DrawTree에 그림자 그리기 코드를 추가합니다.
function drawTree(context) {
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
trunkGradient.addColorStop(0,'#663300');
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);
var canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();
context.fillStyle="#339900";
context.fill();
context.save();
//X Y ， ，
context.transform(1,0,-0.5,1,0,0);
// Y
context.scale(1,0.6);
context.fillStyle='rgba(0,0,0,0.2)';
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.fill();
context.restore();
}
결과:
3. 텍스트 추가
다음 코드 추가
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.font='60px impact';
context.fillStyle='#996600';
context.textAlign='center';
context.fillText('Happy Trails!',200,60,400);
context.restore();
context.save();
결과 표시:
4, 그림자, 글꼴 적용
다음 코드를 추가합니다.
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.font='60px impact';
context.fillStyle='#996600';
context.textAlign='center';
//
context.shadowColor='rgba(0,0,0,0.2)';
context.shadowOffsetX=15;
context.shadowOffsetY=-10;
context.shadowBlur=2;
context.fillText('Happy Trails!',200,60,400);
context.restore();
결과:
모든 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>drawTree</title>
</head>
<script>
function createCanopyPath (context) {
//
context.beginPath();
context.moveTo(-25,-50);
context.lineTo(-10,-80);
context.lineTo(-20,-80);
context.lineTo(-5,-110);
context.lineTo(-15,-110);
//
context.lineTo(0,-140);
context.lineTo(15,-110);
context.lineTo(5,-110);
context.lineTo(20,-80);
context.lineTo(10,-80);
context.lineTo(25,-50);
// ，
context.closePath();
}
function drawTree(context) {
var trunkGradient=context.createLinearGradient(-5,-50,5,-50);
trunkGradient.addColorStop(0,'#663300');
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);
var canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();
context.fillStyle="#339900";
context.fill();
context.save();
//X Y ， ，
context.transform(1,0,-0.5,1,0,0);
// Y
context.scale(1,0.6);
context.fillStyle='rgba(0,0,0,0.2)';
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.fill();
context.restore();
}
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.font='60px impact';
context.fillStyle='#996600';
context.textAlign='center';
//
context.shadowColor='rgba(0,0,0,0.2)';
context.shadowOffsetX=15;
context.shadowOffsetY=-10;
context.shadowBlur=2;
context.fillText('Happy Trails!',200,60,400);
context.restore();
context.save();
context.translate(130,250);
drawTree(context);
context.restore();
// canvas
context.save();
context.translate(260,500);
context.scale(2,2);
drawTree(context);
context.restore();
context.translate(-10,350);
context.beginPath();
//
context.moveTo(0,0);
context.quadraticCurveTo(170,-50,260,-190);
//
context.quadraticCurveTo(310,-250,410,-250);
//
context.strokeStyle='#663300';
context.lineWidth=20;
context.stroke();
}
window.addEventListener("load",drawTrails,true);
</script>
<body>
<canvas id="trails" style="border:1px solid;" width="400" height="600">
</canvas>
</body>
</html>
2011-5-14 11:26 danny
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Jetpack Compose를 사용한 커스텀 컴포저블첫 번째 기사 시리즈에서는 Jetpack Compose에서 맞춤 보기를 만드는 방법에 대해 이야기하고 싶습니다. Labeled Ranged Slider의 예에서는 완전히 맞춤설정된 컴포저블을 만드는 데 필요한 단계를...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
