使用Html5中的cavas画一面国旗


Posted in HTML / CSS onSeptember 25, 2019

使用Html5中的cavas画一面国旗,具体代码如下所示:

var canvas = document.getElementById("canvas");//创建一个cavas画板
    var context = canvas.getContext('2d');//设置画板属性
    var width=canvas.width;
    var height=width*2/3;
    context.fillStyle="red";
    context.fillRect(0,0,width,height);
    var maxR = 0.15, minR = 0.05;
    var maxX = 0.55, maxY = 0.35;//大五星的位置
    var minX = [0.80, 0.90, 0.90, 0.80,0.65,0.50,0.40];//各个小五角星的x坐标
    var minY = [0.20, 0.30, 0.45, 0.55,0.60,0.60,0.50];//各个小五角星的y坐标
    var ox = height * maxX, oy = height * maxY;

html代码

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

js代码

create5star(context,ox,oy,height * maxR,"#ff0",0);//绘制大五角星
    for (var idx = 0; idx < 7; idx++) {
        var  sx = minX[idx] * height, sy = minY[idx] * height;
        var  theta = Math.atan((oy - sy)/(ox - sx));
        create5star(context,sx, sy, height * minR, "#ff0",-Math.PI/2+theta);    // 画小五角星
    }
    //绘制五角星
    function create5star(context,sx,sy,radius,color,rotato){
        context.save();
        context.fillStyle=color;
        context.translate(sx,sy);//移动坐标原点
        context.rotate(Math.PI+rotato);//旋转
        context.beginPath();//创建路径
        var x = Math.sin(0);
        var y= Math.cos(0);
        var dig = Math.PI/5 *4;
        for(var i = 0;i< 5;i++){//画五角星的五条边
            var x = Math.sin(i*dig);
            var y = Math.cos(i*dig);
            context.lineTo(x*radius,y*radius);
        }
        context.closePath();
        context.stroke();
        context.fill();
        context.restore();
    }

总结

以上所述是小编给大家介绍的使用Html5中的cavas画一面国旗,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3画一个阴阳八卦图
Mar 09 HTML / CSS
css3 box-sizing属性使用参考指南
Jan 08 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 #HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 #HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 #HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 #HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 #HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 #HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 #HTML / CSS
You might like
在PHP中使用模板的方法
2008/05/24 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
linux下php上传文件注意事项
2016/06/11 PHP
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
JQuery实现可直接编辑的表格
2015/04/16 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
Python实现各种排序算法的代码示例总结
2015/12/11 Python
python针对excel的操作技巧
2018/03/13 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
小学推普周活动总结
2015/05/07 职场文书
文艺委员竞选稿
2015/11/19 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
SONY600GR,国产收音机厂商永远的痛
2022/04/05 无线电