手把手教你用HTML5画图效果实例

基本信息

源码名称：手把手教你用HTML5画图效果实例

源码大小：0.05M

文件格式：.zip

开发语言：CSS

更新时间：2013-01-07

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

HTML5画的圣诞树经典实例哦

<!DOCTYPE html>
<html>
  <title>Final example</title>

  <canvas id="trails" style="border: 1px solid;"  width="400" height="600"> </canvas>
  <script>
        var gravel = new Image();
        gravel.src = "gravel.jpg";
        gravel.onload = function () {
            drawTrails();
        }

        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) {
            context.save();
            context.transform(1, 0,
                              -0.5, 1,
                              0, 0);
            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();

            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 canopyShadow = context.createLinearGradient(0, -50, 0, 0);
            canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
            canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');
            context.fillStyle = canopyShadow;
            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();

            context.save();
            context.translate(260, 500);

            context.scale(2, 2);
            drawTree(context);
            context.restore();

            context.save();
            context.translate(-10, 350);
            context.beginPath();
            context.moveTo(0, 0);
            context.quadraticCurveTo(170, -50, 260, -190);
            context.quadraticCurveTo(310, -250, 410,-250);
            context.strokeStyle = context.createPattern(gravel, 'repeat');
            context.lineWidth = 20;
            context.stroke();
            context.restore();

            context.save();
            context.font = "60px impact";
            context.textAlign = 'center';
            context.fillStyle = '#996600';
            context.fillText('Happy Trails!', 200, 60, 400);
            context.restore();
        }

  </script>
</html>