<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. Java笔记(十五)……面向对象IV多态(polymorphism)

    概述 定义:某一类事物的多种存在形态. 例:动物中猫,狗. 猫这个对象对应的类型是猫类型 猫 x = new 猫(); 同时猫也是动物中的一种,也可以把猫称为动物. 动物 y = new 猫(); 动 ...

  2. PHP中Get()和Post()用法详解

    作为一个计算机系统,输入输出设备作为非核心设备却是不可或缺的,硬件如此,软件亦是如此.试想一台功能强劲的计算机,如果没有输入输出设备,它与一块只能耗电并且发出嗡嗡噪音的废铁有何不同.应用程序的道理也是 ...

  3. NTC（负温度）热敏电阻.阻值的计算方式

    来源 :http://blog.csdn.net/blue0432/article/details/8690190 现在低成本测温方案中NTC热敏电阻用的比较多,一般采用查表的方法获取温度值,这就牵涉 ...

  4. fcntl记录锁实例

    fcntl 函数是一个相当常用的对文件进行加锁操作的函数. 文件锁包括强制锁.建议锁.记录锁, 不过一般系统和内核都是用的强制锁. 以下为记录锁的例子:------------------------ ...

  5. [SCOI2005]互不侵犯King

    题目描述 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. ——by洛谷 https://www. ...

  6. RSA客户端js加密服务器C#解密(含源码)

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  7. ConversionException: No value specified for 'Date'的解决版本

    DateConverter converter = new DateConverter(defaultValue); ConvertUtils.register(converter, java.uti ...

  8. DirectoryEntry 活动目录的使用

    public class DirectoryHelper { public static string DomainName = System.Environment.UserDomainName; ...

  9. &lt;Android&gt;从窗口泄漏谈android:configChanges属性

    今天有幸去哥们的大公司做了半天的暂时工,一个偶现的Bug折腾了他好久,好不easy今天抓到了异常Log日志.大致的意思就是android.view.windowleaked--窗口泄漏.我在网上查了资 ...

  10. Spring mvc Data Redis—Pub/Sub（附Web项目源码）

    一.发布和订阅机制 当一个客户端通过 PUBLISH 命令向订阅者发送信息的时候,我们称这个客户端为发布者(publisher). 而当一个客户端使用 SUBSCRIBE 或者 PSUBSCRIBE ...