H5之canvas简单入门
<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简单入门的更多相关文章
- ECharts.js 超简单入门（本质canvas）
ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...
- EChart.js 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- ECharts.js学习（一） 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- [转]Scrapy简单入门及实例讲解
Scrapy简单入门及实例讲解 中文文档: http://scrapy-chs.readthedocs.io/zh_CN/0.24/ Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用 ...
- HTML5 Canvas 画图入门
HTML5 Canvas 画图入门 HTML5 Canvas 画图入门,仅供学习參考 <!DOCTYPE html> <html> <head> <meta ...
- 【转帖】H5 手机 App 开发入门：概念篇
H5 手机 App 开发入门:概念篇 http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html 作者: 阮一峰 日期: 2019年 ...
- [转帖]H5 手机 App 开发入门：技术篇
H5 手机 App 开发入门:技术篇 http://www.ruanyifeng.com/blog/2019/12/mobile-app-technology-stack.html 阮一峰老师的文 ...
- 一篇文章带你了解网页框架——Vue简单入门
一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...
- 用IntelliJ IDEA创建Gradle项目简单入门
Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...
随机推荐
- FP树（附）
Apriori算法和FPTree算法都是数据挖掘中的关联规则挖掘算法,处理的都是最简单的单层单维布尔关联规则. 转自http://blog.csdn.net/sealyao/article/detai ...
- [原]ubuntu下制作ubuntu源
ubuntu下可以用debmirror来下载ubuntu的所有源: 配置ubuntu12.04_mirror.sh ########################################## ...
- Modules you should know in Python Libray
前两天被问到常用的python lib和module有哪些?最常用的那几个,其他的一下子竟然回答不上.想想也是,一般情况下,遇到一个问题,在网上一搜,顺着线索找到可用的例子,然后基本没有怎么深究.结果 ...
- [一]初识SpringMVC
是什么? web开发框架 为什么用? 功能强大 怎么做? 1.导入jar包 2.配置web.xml <?xml version="1.0" encoding="UT ...
- http 2.0
http2.0 待学习整理 http://www.zhihu.com/question/34074946
- 中文乱码 jsp正常后台接收异常
关于中文乱码:1,解决GET方式中的中文编码问题. 在Jsp中如果用中文方式传递编码,一定要保证传递过去的是U8:情况一:在便签中<s:action > 可以使用<s:param&g ...
- Android ArrayAdpater 填充集合
在这里我们新创建一个任务来演示 然后再布局文件中定义一个ListView 来当作显示数据的容器,布局文件代码如下: <LinearLayout xmlns:android="http: ...
- 【转】解决Cannot change version of project facet Dynamic web module to 2.5
http://blog.csdn.net/steveguoshao/article/details/38414145 我们用Eclipse创建Maven结构的web项目的时候选择了Artifact I ...
- Yii CGridView 基本使用（三）关联表相关字段搜索
加入 关联表 相关字段的搜索: 先说一句,我们在这里仅仅谈 "一对多" 的关联搜索,首先,不要忘了我们的数据库,忘记的同学请戳这里:这里.能够看到在 tbl_post 中是有一个外 ...
- MyPhone
based on H323plus project. https://github.com/muggot/myphone3/tree/master/myphone3