用Canvas,画中国国旗(Canvas基本知识点)
.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基本知识点)的更多相关文章
- canvas画画板,canvas画五角星,canvas制作钟表、Konva写钟表
制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...
- 兼容IE浏览器的canvas画线和圆圈
1.新建test.html文件,代码如下: <!DOCTYPE html><html><head> <meta charset="utf-8& ...
- Canvas: 优雅的代码作图系列:中国国旗
Canvas: 优雅的代码作图系列:中国国旗 有很多个这练手的,好的差的都有.这次,我演示下用极客的代码,画出最标准的中国国旗,并详细说明代码是怎么写出来的. 绘制规范: 一.严格按照绘制说明: 二. ...
- canvas画的北斗七星和大熊座
用canvas画的北斗七星和大熊座,主要用到的知识点是:canvas.定时器. html代码: <body> <canvas id="canvas" width= ...
- 使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
- canvas 画圈 demo
html代码: <canvas id="clickCanvas2" width="180" height="180" data-to ...
- 踩个猴尾不容易啊 Canvas画个猴子
踩个猴尾不容易啊 Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- canvas画简单电路图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用canvas画简单的“我的世界”人物头像
前言:花了4天半终于看完了<Head First HTML5>,这本书的学习给我最大的感受就是,自己知识的浅薄,还有非常多非常棒的技术在等着我呢.[熊本表情]扶朕起来,朕还能学! H5新增 ...
随机推荐
- 自制 Word、Excel 批转 PDF 工具
原文:自制 Word.Excel 批转 PDF 工具 目前做金融业的项目,该公司每天会产生很多 Word.Excel 文档,需要大量地转换为 PDF,除了自己保存外,也要给金融主管机构作为备份.由于文 ...
- 解决easyui datagrid load时缓存问题
修改easyui datagrid内容保存后,使用$("#dg").datagrid("reload");或者$("#dg").datagr ...
- 打开VMware的系统出错
打开VMware系统时,出现错误 “Invalid configuration file. File "I:/My Virtual Machines/Windows XP english P ...
- 国内外最全面和主流的JS框架与WEB UI库
当下对于网站前段开发人员来说,很少有人不使用一些JS框架或者WEB UI库,因此这些可以有效提高网站前段开发速度,并且能够统一开发环境,对于不同浏览器的兼容性也不需要程序员操心,有了这些优点,当然大家 ...
- C# socket通信随记回顾
----tcp(传输 控制 协议)是可靠消息:三次握手(发给对方,对方发给自己,证明对方接到消息,在发给对方,说明自己能接到对方消息,这样就都知道了):tcp:每发送一次消息,对方都会回复,证明接受到 ...
- Toad for Oracle的安装
分享一下Oracle 10gToad for Oracle的安装步骤 三年前用过Oracle,单纯的“用过”,主要就是说对数据库的一些操作,还不包含创建一些存储过程之类的,所以对Oracle仅仅只 ...
- c# in deep 之Lambda表达式
从很多方面,Lambda表达式都可以看作是C# 2的匿名方法的一种演变.匿名方法能做的几乎一切事情都可以用Lambda表达式来完成,而且其更简洁.易读.下面是一个简单例子. class Film ...
- 修改Ubuntu Server的分辨率
修改Ubuntu Server的分辨率,其实就是找到关键的文件,然后修改参数,重启一下,就可以看见效果了. 1.打开文件并修改参数 文件位置:/etc/default/grub 修改位置:GRUB_C ...
- 图解 ENGLISH
人在江湖,总得会几门手艺,英语必不可缺,下面几张图诠释了什么叫强大:
- map,set的模板[STL]
之前写某题单词查找的时候,有用到set,晚上写codeforces#497 div2 D题有用到map 感觉set,map的功能挺类似的,在此小结: 这里就不具体比较相同点和不同点了,免得看起来乱七八 ...