<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. 无法连接 mysql

    ==================================================================================================== ...

  2. java 关于多态的一点总结

    http://www.cnblogs.com/wenruo/p/5352683.html 一直不是很理解多态,今天看了两遍<think in java>第八章,试着总结一下. 多态的本质就 ...

  3. js定时显示广告代码

    这是一则定时显示广告的javascript代码,当然也可以定时显示某一区块内容,很实用. 代码如下: function strToDate(str, ext) { if (str == null || ...

  4. C# 连接SQL数据库 常用连接字符串

    一:C# 连接SQL数据库 Data Source=myServerAddress;Initial Catalog=myDataBase;User Id=myUsername;Password=myP ...

  5. BZOJ 2049: [Sdoi2008]Cave 洞穴勘測 LCT

    入门级LCT: 仅仅有 Cut Link 2049: [Sdoi2008]Cave 洞穴勘測 Time Limit: 10 Sec  Memory Limit: 259 MB Submit: 3073 ...

  6. FragmentTransactionExtended

    https://github.com/DesarrolloAntonio/FragmentTransactionExtended

  7. ThinkPHP中的动态缓存(S方法)和快速缓存(F方法)(转)

    系统默认的缓存方式是采用File方式缓存,我们可以在项目配置文件里面定义其他的缓存方式,例如,修改默认的缓存方式为Xcache(当然,你的环境需要支持Xcache)    对于File方式缓存下的缓存 ...

  8. Spring + JDK Timer Scheduler Example--reference

    http://www.mkyong.com/spring/spring-jdk-timer-scheduler-example/ In this example, you will use Sprin ...

  9. log4j.properties文件配置--官方文档

    Default Initialization Procedure The log4j library does not make any assumptions about its environme ...

  10. 使用modelsim仿真DDR3时编译出错的解决方法

    Modelsim 10.1c release note sates as : Product Changes in 10.1c Release 10.1b introduced a new error ...