HTML5教程实例-Canvas标签-坐标变换与路径结合使用

最新推荐文章于 2021-12-23 19:20:33 发布

yixuan_1

最新推荐文章于 2021-12-23 19:20:33 发布

阅读量943

点赞数

分类专栏：精通HTML5 文章标签： html5教程 canvas 坐标变换路径结合

精通HTML5 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

HTML5教程实例-Canvas标签-坐标变换与路径结合使用

到目前为止，我们已经学会了很多Canvas的绘制方法，如果我们要绘制如下图的图形怎么办呢？

我们需要对矩形变形，使用坐标变换就足够了。但是对使用路径绘制出来的图形进行变幻的时候，那么要考虑的事情就多了。因为使用坐标变换之后，已经创建好的路径就不可用了。必须要重新创建路径，重新创建路径后，坐标变换方法又失效了。

解决思路

1、必须先另外绘制一个创建路径的函数。

2、在坐标变幻的同时调用该函数。

  
  <!DOCTYPE HTML> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
        <title>HTML5每日一练之Canvas标签的应用-坐标变换与路径结合使用</title> 
                <script type="text/javascript"> 
        window.onload = function() 
        { 
                        createPic(); 
                } 
                 
                //创建图形 
                function createPic() 
                { 
                        var canvas = document.getElementById("W3Cfuns_canvas"); 
                        var context = canvas.getContext("2d"); 
                        context.fillStyle = "#d4d4d4"; 
                        context.fillRect(0, 0, 400, 300); 
                        //绘制图形 
                        context.translate(200, 50); 
                        for(var i = 0; i < 50; i++) 
                        { 
                                context.translate(25, 25); 
                                context.scale(0.95, 0.95); 
                                context.rotate(Math.PI / 8); 
                                createStar(context);//此方法专门绘制五角星 
                                context.fill(); 
                        } 
                } 
                 
                //创建五角星的方法 
                function createStar(c) 
                { 
                        var n = 0; 
                        var dx = 100; 
                        var dy = 0; 
                        var s = 50; 
                        var x = Math.sin(0); 
                        var y = Math.cos(0); 
                        var dig = Math.PI / 5 * 4; 
                        //创建路径 
                        c.beginPath(); 
                        c.fillStyle = toRGB(parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0),parseInt(Math.random()*(255 - 0 + 1) + 0)); 
                        for(var i = 0; i < 5; i++) 
                        { 
                                x = Math.sin(i * dig); 
                                y = Math.cos(i * dig); 
                                c.lineTo(dx + x * s, dy + y * s); 
                        } 
                        c.closePath(); 
                } 
                 
                //小于10补零 
                function addZero(string){return string.length == 2 ? string : '0' + string;} 
                 
                //随即颜色 
                function toRGB(redValue, greenValue, blueValue) 
                { 
                        var  
                                rgbR = addZero(redValue.toString(16), 2), 
                                rgbG = addZero(greenValue.toString(16), 2), 
                                rgbB = addZero(blueValue.toString(16), 2); 
                        var rgb = "#" + rgbR + rgbG + rgbB; 
                        return rgb; 
                } 
        </script> 
    </head> 
     
    <body> 
            <canvas id="W3Cfuns_canvas" width="400" height="300"></canvas> 
    </body> 
</html>

本文原地址：http://www.sitejs.cn/sitejs-12749-1.html

yixuan_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5教程实例-Canvas标签-坐标变换与路径结合使用

HTML5教程实例-Canvas标签-坐标变换与路径结合使用到目前为止，我们已经学会了很多Canvas的绘制方法，如果我们要绘制如下图的图形怎么办呢？我们需要对矩形变形，使用坐标变换就足够了。但是对使用路径绘制出来的图形进行变幻的时候，那么要考虑的事情就多了。因为使用坐标变换之后，已经创建好的路径就不可用了。必须要重新创建路径，重新创建路径后，坐标变换方法又失效了。
复制链接

扫一扫