HTML5--canvas笔记(1)

最新推荐文章于 2024-05-05 07:17:26 发布

ZombieZHAO

最新推荐文章于 2024-05-05 07:17:26 发布

阅读量755

点赞数 1

分类专栏： HTML5高级编程

本文链接：https://blog.csdn.net/ZombieZHAO/article/details/40901339

版权

HTML5高级编程专栏收录该内容

2 篇文章 0 订阅

订阅专栏

昨天从图书馆借了一本《HTML5高级编程》，第一章进行的很顺利。第二章讲的HTML5的新特征canvas画布。照着书上的代码敲下去，一直很顺利，直到画例子中的小路是出现问题了，我的显示不出小路，只能显示出树。我的代码是

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="treeAndRoad.aspx.cs" Inherits="TestDemo_treeAndRoad" %>

<!DOCTYPE html>

<html >
<head >
<meta  charset="utf-8"/>
    <title>TreeAndRoad</title>
    
</head>
<body>
    <canvas id ="trails" style ="border :1px solid" width ="1000" height ="1000"></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 drawTrails() {

            var canvas1 = document.getElementById("trails");
            var context1 = canvas1.getContext('2d');
            context1.save();

            context1.translate(130, 250);
            //创建表现树冠的路径
            createCanopyPath(context1);

            context1.lineWidth = 4;//加宽线条
            context1.lineJoin = 'round';//平滑路径的接合点
            context1.strokeStyle = '#663300';//改为棕色
            context1.fillStyle = '#339900';//填充树冠为绿色

            context1.fill();//填充颜色，在stroke（）之后，会填充掉一部分加宽的路径，所以fill（）在stroke（）之前使用，不会出现这种状况
            context1.stroke();

            //通过fillRect()可以直接画出矩形的树干
            context1.fillStyle = '#663300';
            context1.fillRect(-5, -50, 10, 50);
          <span style="color:#000066;"> <span style="color:#CC0000;"> context1.strokeRect();</span></span>
            context1.restore();

            context1.save();
            context1.translate(-10, 350);
            context1.beginPath();
            context1.moveTo(0, 0);
            context1.quadraticCurveTo(170, -50, 260, -190);
            context1.quadraticCurveTo(310, -250, 410, -250);
            context1.strokeStyle = '#663300';
            context1.lineWidth = 20;
            context1.stroke();
            context1.restore();
 
        }
        window.addEventListener("load", drawTrails(),true);
    </script>
    
</body>
</html>

其结果：

网上找也没找到什么原因，只好下载了源代码，和源代码一比较，发现问题了，我画蛇添足的写多了一句红色字体的句子，strokeRect(x,y,width,height)函数是生成一个不被填充的矩形，里面必须有参数。而我的没写参数，程序到这应该停止了，就没有执行下面的语句，所以小路没有显示出来。正确的结果是：