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有的功能它都 ...
随机推荐
- Jlink烧写图文教程
,点击安装 , 插上jlink,安装驱动后,红灯一直亮 ...
- 决策树及其python实现
剪枝 由于悲观错误剪枝 PEP (Pessimistic Error Pruning).代价-复杂度剪枝 CCP (Cost-Complexity Pruning).基于错误剪枝 EBP (Error ...
- 让php永远后台运行
ignore_user_abort(true); // 后台运行set_time_limit(0); // 取消脚本运行时间的超时上限
- unix时间戳和localtime
今天看代码的时候看到这么一段 void user::setHelpday() { int time = ::getTickCount(); m_helpday = (time +( * ))/( * ...
- Worker工作者进程
- CM5(Cloudera Manager 5) + CDH5（Cloudera's Distribution Including Apache Hadoop 5）的安装详细文档
参考 :http://www.aboutyun.com/thread-9219-1-1.html Cloudera Manager5及CDH5在线(cloudera-manager-installer ...
- weekend110（Hadoop）的 第一天笔记
(2015年1月10日) 课程目录 01-hadoop职位需求状况 02-hadoop课程安排 03-hadoop应用场景 04-hadoop对海量数据处理的解决思路 05-hadoop版本选择和伪分 ...
- windows蓝屏代码大全及常见蓝屏解决方案
对于以下的代码查询建议使用ctrl+F查询,而且很多蓝屏与黑屏的问题多是最近操作引起的,例如更新驱动,安装新的硬件.软件--把相关的配置调到最近的正常状况大多可以解决,确实不行时方可考虑重装系统,解决 ...
- Oracle数据库编程：PL/SQL编程基础
2.PL/SQL编程基础: PL/SQL块: declare 定义部分 begin 执行部分 exception 异 ...
- MediaProvider 数据库Audio相关表格相应关系
Android的MediaProvider提供了一系列的Audio,Video,image等表格,用于APP检索相关的音视频图片信息. 首先来看看Audio相关的表格: ×图中颜色同样的部分表示来自于 ...