HTML5 Canvas 绘制加拿大枫叶旗

更新时间：2022-09-16 21:57:00

这段代码比较简单，中间的枫叶使用了图片，因为没找到画法：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>加拿大枫叶旗</title>
    </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="496px" height="249px" style="border:1px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
    function draw(){
        var canvas=document.getElementById("myCanvus");
        var canvasWidth=496;
        var canvasHeight=249;

        var context=canvas.getContext("2d");
        
        context.fillStyle = "white";
        context.fillRect(0, 0, canvasWidth, canvasHeight);
        
        // 先画边上红色方块
        context.fillStyle = "rgb(218,37,29)";
        context.fillRect(0, 0, 124, 249);
        context.fillRect(372, 0, 124, 249);

        // 绘制枫叶
        var img=new Image();
        img.src='fy.gif';
        context.save();
        img.onload=function(){
                var pattern=context.createPattern(img,'no-repeat');
                context.fillStyle=pattern;                
                context.translate(124,0);
                context.fillRect(0,0,248,249);
        }

        context.restore();
    }

    function getRad(degree){
        return degree/180*Math.PI;
    }
//-->
</script>

代码及图片下载：https://files.cnblogs.com/files/xiandedanteng/canadaFlag.rar

本文转自张昺华-sky博客园博客，原文链接：http://www.cnblogs.com/xiandedanteng/p/7472039.html，如需转载请自行联系原作者

上一篇 : ：统计ES性能的python脚本下一篇 : Nand flash uboot 命令详解【转】

HTML5 Canvas 绘制加拿大枫叶旗

相关阅读

推荐文章