.getContext("2d")=======>获取绘图接口  //2d

.beginPath()========>创建绘图路径开始点

.moveTo(x,y)==========>移动绘画点到x,y

.lineTo(x,y)============>绘制线条

.strokeStyle = "#000"  ======>设置线条颜色  //黑色(#000)

.fillStyle = "#000"  =========>封闭图形填充颜色  //黑色(#000)

.fill()==================>填充

.stroke()==============>绘制线条到画布(我个人认为:确认要画下去的意思)

原理是用线条画一个星星(只要外面的六个角的坐标[最后还要回到开始的地方]),然后再填充颜色,国旗背景色由css控制

效果图:

未填充:

填充后:

-------------------------------最终效果图------------------

好像有点歪了...没办法,本人是直接用ps量的~~

html代码:

<canvas id="flag">
        你的浏览器居然不支持canvas?!赶紧换一个浏览器吧.
    </canvas>

css代码:

#flag{
            background: #f00;

    /* 国旗背景色 */
        }

JavaScript代码(星星代码):

var myCanvas = document.getElementById("flag")
myCanvas.width = 600;
myCanvas.height = 400;

var ctx = myCanvas.getContext("2d");

// 创建绘制路径开始点

// 大星星
ctx.beginPath();
ctx.fillStyle = "#ffff00";
ctx.strokeStyle = "#ffff00";
ctx.moveTo(103,49);
ctx.lineTo(141,164);
ctx.lineTo(43,92);
ctx.lineTo(164,92);
ctx.lineTo(66,164);
ctx.lineTo(103,49);
ctx.fill();
ctx.stroke();

// 小星星 第一个
ctx.beginPath();
ctx.fillStyle = "#ffff00";
ctx.strokeStyle = "#ffff00";
ctx.moveTo(186,61);
ctx.lineTo(216,26);
ctx.lineTo(214,72);
ctx.lineTo(189,33);
ctx.lineTo(231,50);
ctx.lineTo(186,61);
ctx.fill();
ctx.stroke();

// 小星星 第二个
ctx.beginPath();
ctx.fillStyle = "#ffff00";
ctx.strokeStyle = "#ffff00";
ctx.moveTo(228,96);
ctx.lineTo(269,76);
ctx.lineTo(247,117);
ctx.lineTo(241,71);
ctx.lineTo(273,104);
ctx.lineTo(244,99);
ctx.fill();
ctx.stroke();

// 小星星 第三个
ctx.beginPath();
ctx.fillStyle = "#ffff00";
ctx.strokeStyle = "#ffff00";
ctx.moveTo(224,148);
ctx.lineTo(273,148);
ctx.lineTo(236,175);
ctx.lineTo(249,131);
ctx.lineTo(265,175);
ctx.lineTo(224,148);
ctx.fill();
ctx.stroke();

// 小星星 第4个
ctx.beginPath();
ctx.fillStyle = "#ffff00";
ctx.strokeStyle = "#ffff00";
ctx.moveTo(189,182);
ctx.lineTo(231,199);
ctx.lineTo(186,211);
ctx.lineTo(216,175);
ctx.lineTo(213,221);
ctx.lineTo(189,182);
ctx.fill();
ctx.stroke();

用Canvas,画中国国旗(Canvas基本知识点)的更多相关文章

  1. canvas画画板,canvas画五角星,canvas制作钟表、Konva写钟表

    制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...

  2. 兼容IE浏览器的canvas画线和圆圈

    1.新建test.html文件,代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8& ...

  3. Canvas: 优雅的代码作图系列:中国国旗

    Canvas: 优雅的代码作图系列:中国国旗 有很多个这练手的,好的差的都有.这次,我演示下用极客的代码,画出最标准的中国国旗,并详细说明代码是怎么写出来的. 绘制规范: 一.严格按照绘制说明: 二. ...

  4. canvas画的北斗七星和大熊座

    用canvas画的北斗七星和大熊座,主要用到的知识点是:canvas.定时器. html代码: <body> <canvas id="canvas" width= ...

  5. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  6. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  7. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  8. canvas画简单电路图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 用canvas画简单的“我的世界”人物头像

    前言:花了4天半终于看完了<Head First HTML5>,这本书的学习给我最大的感受就是,自己知识的浅薄,还有非常多非常棒的技术在等着我呢.[熊本表情]扶朕起来,朕还能学! H5新增 ...

随机推荐

  1. C# File类的操作

    原文:C# File类的操作 File类,是一个静态类,主要是来提供一些函数库用的.静态实用类,提供了很多静态的方法,支持对文件的基本操作,包括创建,拷贝,移动,删除和打开一个文件.File类方法的参 ...

  2. CruiseControl.Net全面实现持续集成

    使用CruiseControl.Net全面实现持续集成   持续集成想必大家很多人都听说过,甚至都实践过,最近我又一次亲历了一次持续集成,现将我的经验分享给大家.关于持续集成的理论在本文概不涉及,本文 ...

  3. Java类之间的关联关系(转载)

    Java类之间的关联关系 UML类图中的关系分为四种:泛化.依赖.关联.实现:关联关系又可以细化为聚合和组合. 一.泛化(Generalization) 泛化是父类和子类之间的关系,子类继承父类的所有 ...

  4. win7 64位系统装oracle11 提示环境变量path 值超过1023字符

    win7 64位系统装oracle10 提示环境变量path 值超过1023字符 1.提示环境变量path 值超过1023字符. 方案: 1.oracle安装文件,右键属性--设置兼容性--兼容XP ...

  5. oracle导入数据

    oracle导入数据时候注意点: 1.imp system/admin@oracle9i file=E:\shujukuwenjian\2014-04-01.dmp fromuser=ptb_supe ...

  6. iOS基础 - UITableViewController

    1. 继承UITableViewController默认会设置数据源和代理,并且会自动遵守数据源和代理协议,并且self.tableView 相当于 self.view 2.更换控制器时,注意把sto ...

  7. 设计模式20---设计模式之备忘录模式(Memento)(行为型)

    1.讲解备忘录模式 备忘录模式(Memento Pattern)又叫做快照模式(Snapshot Pattern)或Token模式,是GoF的23种设计模式之一,属于行为模式. 1.1定义 在不破坏封 ...

  8. vijos1004 博弈论

    一道挺简单的博弈论题 感觉自己也没有很规范的学过博弈论吧,就是偶尔刷到博弈论的题目,感受一下推导的过程,大概能领悟些什么 我们设2001.11.4必败,推上去,即2001.10.4和2001.11.3 ...

  9. RDLC(Reportview)报表直接打印,支持所有浏览器,客户可在linux下浏览使用

    最近在做一个打印清单的,但是rdlc报表自带的工具栏中的打印按钮只有在ie内核下的浏览器才可以使用(其他的就会 隐藏),这导致了使用火狐和谷歌浏览器还有使用linux系统的客户打印成了问题,于是就自己 ...

  10. 一个Shell小脚本——旋转的斜杠

    话不多说,请从代码中寻找乐趣吧! #!/bin/bash #----中断计数器----# incr= #----旋转的斜杠----# spin="/-\|" echo -en &q ...