<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. 《Genesis-3D开源游戏引擎--横版格斗游戏制作教程06：技能播放的逻辑关系》

    6.技能播放的逻辑关系 技能播放概述: 当完成对技能输入与检测之后,程序就该对输入在缓存器中的按键操作与程序读取的技能表信息进行匹配,根据匹配结果播放相应的连招技能. 技能播放原理: 按键缓存器中内容 ...

  2. POJ-3207 Ikki's Story IV - Panda's Trick 2sat

    题目链接:http://poj.org/problem?id=3207 题意:在一个圆圈上有n个点,现在用线把点两两连接起来,线只能在圈外或者圈内,现给出m个限制,第 i 个点和第 j 个点必须链接在 ...

  3. Introduction to SignalR -摘自网络

    What is SignalR? ASP.NET SignalR is a library for ASP.NET developers that simplifies the process of ...

  4. WPF布局系统[转]

    转自:http://www.cnblogs.com/niyw/archive/2010/10/31/1863908.html前言 前段时间忙了一阵子Google Earth,这周又忙了一阵子架构师论文 ...

  5. IntelliJ IDEA的下载、安装和WordCount的初步使用（本地模式和集群模式）

    包括: IntelliJ IDEA的下载  IntelliJ IDEA的安装 IntelliJ IDEA中的scala插件安装 用SBT方式来创建工程 或 选择Scala方式来创建工程 本地模式或集群 ...

  6. A Tour of Go Variables

    The var statement declares a list of variables; as in function argument lists, the type is last. pac ...

  7. hdoj 4612 Warm up【双连通分量求桥&&缩点建新图求树的直径】

    Warm up Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Su ...

  8. CSS3最简洁的轮播图

    <!DOCTYPE html> <html> <head> <title>CSS3最简洁的轮播图</title> <style> ...

  9. S2SH商用后台权限系统第一讲

    各位博友: 您好!从今天开始我们做一套商用的权限系统.功能包含用户管理.角色管理.模块管理.权限管理.大家知道每个商用系统肯定会拥有一套后台系统,我们所讲的权限系统是整个系统核心部分.本套系统技术有s ...

  10. uva 10986 - Sending email(最短路Dijkstra)

    题目连接:10986 - Sending email 题目大意:给出n,m,s,t,n表示有n个点,m表示有m条边,然后给出m行数据表示m条边,每条边的数据有连接两点的序号以及该边的权值,问说从点s到 ...