<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 小结1（static ，final，泛型）

    static,final. (1)final: final:属于“终态”,意思就是不可以改变.可以修饰非抽象类,非抽象类的方法等.反正就是不能够再改变赋值了. 注意:1)fina类不能被继承,所以它没 ...

  2. Weka 入门2

    现在我们介绍使用Weka来对数据进行分类.对数据进行分类,我们必须先指定那一列作为预测类别.因为数据文件格式的问题,类别一般都是最后一列属性.我们可以使用setClassIndex来设置类别.然后我们 ...

  3. weblogic启动时日志重定向(nohup.out)

    由于weblogic使用  nohup ./startWebLogic.sh &   启动时会将所有日志打印到nohup.out上,长此以往会导致该文件越来越大,不便于管理. 故下面介绍如何重 ...

  4. PC-用Windows XP自带的组策略加固操作系统

    1.我的壁纸你别改==================================== 启动组策略时,单击“开始”按钮,选择“运行”命令,在“运行”文本框中输入“gpedit.msc”命令,即可启 ...

  5. __FILE__,__LINE__,FUNCTION__

    __FILE__,__LINE__,FUNCTION__实现代码跟踪调试 ( linux 下c语言编程 ) 先看下简单的初始代码:注意其编译运行后的结果. root@xuanfei-desktop:~ ...

  6. 【python自动化第八篇：网络编程】

    一.拾遗 动态导入模块 目的是为了在导入模块的过程中将模块以字符的格式导入. #!/usr/bin/env python # -*- coding:utf-8 -*- #Author:wanghui ...

  7. ListView多选操作模式详解CHOICE_MODE_MULTIPLE与CHOICE_MODE_MULTIPLE_MODAL

    这篇文章我们将详细的介绍如何实现ListView的多选操作,文中将会纠正在使用ListViewCHOICE_MODE_MULTIPLE或者CHOICE_MODE_MULTIPLE_MODAL时容易犯的 ...

  8. spring websocket Converters must not be empty

    此文件    WebSocketConfig.java public class WebSocketConfig implements WebSocketMessageBrokerConfigurer ...

  9. 选择排序、插入排序、冒泡排序python实现

    选择排序的时间复杂度为O(n^2),是不稳定的排序 冒泡排序的时间复杂度最好情况下为O(n),最坏情况下为O(n^2),平均情况下为O(n^2),是稳定的排序 插入排序的时间复杂度最好情况下为O(n) ...

  10. MVC架构杂谈

    来源:伯乐在线专栏作者 - 林欣达 链接:http://ios.jobbole.com/86895/ 点击 → 了解如何加入专栏作者 前言 MVC是软件工程中的一种软件架构模式,它把软件系统分为三个基 ...