context.save(); 用于保存 canvas 的当前状态
context.restore(); 恢复之前的 canvas 状态
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title > 绘制松树 </title>
- </head>
- <body>
- <canvas id="canvas" width="500" height="500">
- </canvas>
- <script>
- // 获取文本上下文
- // 绘制松树
- //
- window.onload=function(){
- drawTree();
- }
- function drawTree(){
- var canvas=document.getElementById("canvas");
- var context=canvas.getContext("2d");
- // 绘制小路
- createGradient(context);
- context.translate(200, 200);
- drawPine(context);
- context.translate(-110, 120);
- drawArc(context);
- pineTranslate(context);
- }
- function createGradient(context){
- // 绘制渐变背景
- var g1=context.createLinearGradient(0, 0, 0, 500);
- g1.addColorStop(0, "#44B4FE");
- g1.addColorStop(0.2,'#9BDCFE');
- g1.addColorStop(0.3,'#BEDCF8');
- g1.addColorStop(1,'#F8F5EE');
- context.fillStyle=g1;
- context.fillRect(0, 0, 500, 500);
- }
- function createPine(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 drawPine(context){
- context.save();
- treeShadow(context);
- createPine(context);
- context.lineWidth=4;
- context.lineJoin="round";
- context.strokeStyle="#663300";
- context.stroke();
- context.fillStyle="#339900";
- context.fill();
- context.fillStyle="#663300";
- context.fillRect(-5, -50, 10, 50);
- context.restore();
- }
- function drawArc(context){
- // 使用 context.save() 保存当前 canvas 的 context 状态, 因为我们即将变换坐标并修改轮廓设置
- context.save();
- context.beginPath();
- context.moveTo(-95, -10);
- context.quadraticCurveTo(170, -60, 260, -190);
- context.quadraticCurveTo(310, -250, 410, -260);
- context.strokeStyle="#663300";
- context.lineWidth=20;
- context.stroke();
- context.closePath();
- context.restore();
- }
- // 放大松树并移动
- function pineTranslate(context){
- context.save();
- context.translate(250, 150);
- context.scale(2, 2);
- treeShadow(context);
- drawPine(context);
- context.restore();
- }
- function treeShadow(context){
- // 用于保存 canvas 的当前状态
- context.save();
- //x 值随着 y 的值得增加借助拉伸变换创建一个用作阴影的倾斜的树
- context.transform(1,0,-0.5,1,0,0);
- // 在 y 轴方向将阴影的高度压缩为原来的 60%
- context.scale(1, 0.6);
- // 使用透明度为 20% 的黑色填充树干
- context.fillStyle="rgba(0,0,0,0.2)";
- context.fillRect(-5, -50, 10, 50);
- // 使用已有的阴影效果重绘制树
- createPine(context);
- context.fill();
- // 恢复之前的 canvas 状态
- context.restore();
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/note/49226/170e60598b951cc3791fc61c4ce9c4d8.html