<canvas></canvas>是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图

<canvas id="myCanvas" width="400" height="400"></canvas>默认宽度300px，默认高度 150px;

下面是简单的语法，是必须要记住的。

绘图路径:

beginPath() :开始路径

closePath():结束路径

moveTo(x,y):将触笔移动到x,y点

lineTo(x,y):绘制到x,y点

stroke(): 触笔方法 画线  默认为黑色

fill():填充方法

rect(x,y,w,h):矩形路径

save():保存路径

restore():恢复路径

简单的圆形绘制

绘制圆形：

arc(x,y,r,0,360360*Math.PI/180,false)

x,y  圆心坐标位置

r 圆半径

0,360 从0度到360度 绘制一个圆形

true/false  顺时针/逆时针绘图

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            * {

                margin: 0;

                padding: 0;

            }

            #can{background:#FFBBAA;}

        </style>

    </head>

    <body>

        <canvas id="can" width="500" height="500">

            <script type="text/javascript">

                var oCan=document.getElementById("can");

                var content=oCan.getContext('2d');

                content.translate(250,250);

                //外

                content.save();

                content.beginPath()

                content.arc(0,0,150,0,360*Math.PI/180,false);

                content.lineWidth=20;

                content.closePath();

                content.strokeStyle="#c20f24";

                content.stroke();

                content.restore()

                //中

                content.save();

                content.beginPath()

                content.arc(0,0,100,0,360*Math.PI/180,false);

                content.lineWidth=30;

                content.strokeStyle="#c20f24";

                content.stroke();

                content.closePath();

                content.restore()

                content.fillStyle="#0b1c3a";

                content.fill();

                 //五角星

                 for(var i=0;i<5;i++){

                content.save();

                content.rotate(i*72*Math.PI/180);

                content.beginPath()

                content.fillStyle="#fff";

                content.strokeStyle="#fff";

                content.moveTo(0,-100);

                content.lineTo(-25,-30);

                content.lineTo(0,0)

                content.lineTo(25,-30);    

                content.closePath();

                content.stroke();

                content.fill();

                content.restore()

                }

            </script>

        </canvas>

    </body>

</html>

我也是刚刚学习，不足之处，多多指出，大家共同学习。

H5之canvas简单入门的更多相关文章

  1. ECharts.js 超简单入门（本质canvas）

    ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...

  2. EChart.js 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  3. ECharts.js学习（一） 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  4. [转]Scrapy简单入门及实例讲解

    Scrapy简单入门及实例讲解 中文文档:   http://scrapy-chs.readthedocs.io/zh_CN/0.24/ Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用 ...

  5. HTML5 Canvas 画图入门

    HTML5 Canvas 画图入门 HTML5 Canvas 画图入门,仅供学习參考 <!DOCTYPE html> <html> <head> <meta ...

  6. 【转帖】H5 手机 App 开发入门：概念篇

    H5 手机 App 开发入门:概念篇 http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html 作者: 阮一峰 日期: 2019年 ...

  7. [转帖]H5 手机 App 开发入门：技术篇

    H5 手机 App 开发入门:技术篇   http://www.ruanyifeng.com/blog/2019/12/mobile-app-technology-stack.html 阮一峰老师的文 ...

  8. 一篇文章带你了解网页框架——Vue简单入门

    一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...

  9. 用IntelliJ IDEA创建Gradle项目简单入门

    Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...

随机推荐

  1. Android动态加载so文件

    在Android中调用动态库文件(*.so)都是通过jni的方式,而且往往在apk或jar包中调用so文件时,都要将对应so文件打包进apk或jar包,工程目录下图: 以上方式的存在的问题: 1.缺少 ...

  2. Miller-Rabin素性测试(POJ3641)

    一.概念引入 在以往判断一个数n是不是素数时,我们都是采用i从2到sqrt(n)能否整除n.如果能整除,则n是合数;否则是素数.但是该算法的时间复杂度为O(sqrt(n)),当n较大时,时间性能很差, ...

  3. suse安装软件命令

    zypper se xxxxx 是搜索软件包 zypper in xxxxx 跟apt-get install xxxx等价 zypper rm xxxx 删除 zypper up xxxx 更新软件

  4. poj1149--PIGS（最大流）

    题意: 有m个猪圈 每个猪圈有不同数量的猪 [0, 1000]有n个顾客 每个顾客需要Bi头猪 有Ai个钥匙 能打开Ai个不同的猪圈顾客按顺序来买猪 只能买他有钥匙的猪 买完之后 这几个猪圈的猪可以相 ...

  5. Block介绍（二）内存管理与其他特性

    我们在前一章介绍了block的用法,而正确使用block必须要求正确理解block的内存管理问题.这一章,我们只陈述结果而不追寻原因,我们将在下一章深入其原因. 一.block放在哪里 我们针对不同情 ...

  6. sql server 分布式事务

    使用分布式事务刚好可以解决集群同时更新多台SQL SERVER数据库,要么全部成功,要么全部回滚的需要. 原来微软早考虑到此方面的问题了. 下面背书,贴出微软官网上面的帮助文档: 分布式事务跨越两个或 ...

  7. hdu 3724 Encoded Barcodes

    Trie模板.把所有单词都用字典树存起来,然后给每个节点赋权值表示前缀到该节点出现了几次.然后直接查询就可以了. #include <algorithm> #include <ios ...

  8. 如何解决Python脚本在Linux和Windows上的格式问题

    python是一种对缩进有严格要求的语言, Python脚本可以使用非常多的工具进行编写,笔者在Linux系统使用JEdit进行Python脚本编写,由于在Linux编写脚本比较痛苦,比如想一眼看出相 ...

  9. AS3 IOC框架Spring Actionscript 的使用总结

    Spring Actionscript 是众多围绕依赖注入提供解决方案的Flex控制反转框架之一 AS3 下经典的IOC框架有Spring ActionScript.Parsley.Flicc和Swi ...

  10. 【JAVA - SSM】之MyBatis动态SQL

    动态SQL就是在SQL语句中添加一些标签,以完成某些逻辑.通常用到的动态SQL标签有<if>.<choose>.<where>.<trim>.<s ...