HTML5 Canvas绘制五星红旗

2019-09-08 郑州网站建设  

Canvas 绘图 API 都没有定义在 <canvas> 元素本身上,而是定义在通过画布的 getContext() 办法获得的一个“绘图环境”对象上。

Canvas API 也使用了路径的表示法。但是,路径由一系列的办法调用来定义,而不是描述为字母和数字的字符串,比如调用 beginPath() 和 arc() 办法。

一旦定义了路径,其他的办法,如 fill(),都是对此路径操作。绘图环境的各种属性,比如 fillStyle,说明了这些操作怎么使用。

使用Canvas画中国国旗,代码:

XML/HTML Code复制内容到剪贴板

<!DOCTYPE HTML>  

<html>  

    <head>  

        <meta charset="UTF-8">  

        <title>中国标准国旗</title>  

    </head>  

    <body>  

        <canvas id="canvas" width="600" height="400"></canvas>  

            

        <script type="text/javascript">  

            // 使用HTML5绘制标准五星红旗   

            var canvas = document.getElementById("canvas");   

            var context = canvas.getContext('2d');   

            var width = canvas.width;   

            var height = width * 2 / 3;   

            var w = width / 30;//小网格的宽   

            context.fillStyle = "red";   

            context.fillRect(0, 0, width, height);   

            var maxR = 0.15, minR = 0.05;//   

            var maxX = 0.25, maxY = 0.25;//大五星的位置   

            var minX = [0.50, 0.60, 0.60, 0.50];   

            var minY = [0.10, 0.20, 0.35, 0.45];   

            // 画大 ☆   

            var ox = height * maxX, oy = height * maxY;   

            create5star(context, ox, oy, height * maxR, "#ff0", 0);//绘制五角星   

            // 画小 ★   

            for (var idx = 0; idx < 4; idx++) {   

                var sx = minX[idx] * height, sy = minY[idx] * height;   


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1356.html转载请标明出处,谢谢合作!
标签:
  • 绘图
  • HTML5
  • api
  • 定义
  • 没有
  • Canvas