Canvas1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="canvas" width="1000" height="800" />
<script type="text/javascript">
//纸
var canvas=document.getElementById("canvas");
//笔
var context = canvas.getContext("2d");
//墨
context.strokeStyle="#ff0000";
//写
context.strokeRect(100,100,200,200);
context.fillStyle="#ffff00";
context.fillRect(200,200,200,200);
//三角型
context.beginPath();
context.moveTo(300,300);
context.lineTo(300,400);
context.lineTo(500,400);
context.closePath();
context.strokeStyle="#000000";
context.lineWidth=3;
context.stroke();
context.fillStyle="#ff0000";
context.fill();
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="canvas" width="1000" height="800" />
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var context = canvas.getContext("2d");
context.strokeStyle="rgba(255,0,0,0.5)";
context.beginPath();
// 圆心 半径
context.arc(300,300,100,0,Math.PI*2,false);
context.closePath();
context.stroke();
context.fillStyle="#ff0000";
context.fill();
</script>
</body>
</html>
Canvas3.html
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id="canvas" width="1000" height="800" ></canvas>
<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) {
//树叶
createCanopyPath(context);
context.strokeStyle="#663300";
context.lineWidth=4;
//圆角处理
context.lineJoin="round";
context.stroke();
context.fillStyle="#339900";
context.fill();
//树干
//颜色 线性渐变
var trunkGradient = context.createLinearGradient(-5,0,5,0);
trunkGradient.addColorStop(0,"#663300");
trunkGradient.addColorStop(0.4,"#996600");
trunkGradient.addColorStop(1,"#552200");
context.fillStyle=trunkGradient;
context.fillRect(-5,-50,10,50);
//倒影
context.transform(1,0,-0.5,1,0,0);
context.scale(1.0,0.6);
context.fillStyle="rgba(0,0,0,0.2)";
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.fill();
}
function drawTrails(){
var canvas=document.getElementById("canvas");
var context = canvas.getContext("2d");
//小树
context.save();
context.translate(130,250);
drawTree(context);
context.restore();
//大树
context.save();
context.translate(330,450);
context.scale(2.0,2.0);
drawTree(context);
context.restore();
//文字
context.save();
context.font="60px impact";
context.textAlign="center";
context.fillStyle = "#996600";
context.fillText("GOODS",200,60,400);
context.restore();
}
drawTrails();
</script>
</body>
</html>