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有的功能它都 ...
随机推荐
- Html笔记(三)列表
列表标签: <dl> <dt>:上层标签 <dd>:下层标签 例: <dl> <dt>上层项目</dt> <dd>下 ...
- Storm系列(十九)普通事务ITransactionalSpout及示例
普通事务API详解 1 _curtxid:" + _curtxid 46 + ",_tx.getTransactionId():&qu ...
- linux内核系列(一)编译安装Linux内核 2.6.18
1.配置环境 操作系统:CentOS 5.2 下载linux-2.6.18版本的内核,网址:http://www.kernel.org 说明:该编译文档适合2.6.18以上的Linux内核版本,只需所 ...
- [delphi技术]Delphi常见图象格式转换技术
TJPEGScale = (jsFullSize, jsHalf, jsQuarter, jsEighth);//图片大小(全部,1/2,1/4,1/8)TBitmap.pixelFormat:=pf ...
- Go语言简介
Go语言简介 - Go语言是由Google开发的一个开源项目,目的之一为了提高开发人员的编程效率. Go语言简介 Go语言是由Google开发的一个开源项目,目的之一为了提高开发人员的编程效率. Go ...
- 遇到Class Not registered的COM异常怎么办
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:遇到Class Not registered的COM异常怎么办.
- 关于angular的ng-class条件判断
angular的ng-class的多条件判断是非常好用的,不需要写过多的判断去更改他相应的class, 但大家要记住,在repeat中使用ng-class多条件判断时, 错误写法:<i clas ...
- C++ Combobox输入时自动完成
Combobox 在输入时自动完成 关键点 实现过程 BOOL m_bAuto; BOOL CProject02Dlg::PreTranslateMessage(MSG* pMsg) { i ...
- java并发 使用ScheduledExecutor的温室控制器--thinking in java 21.7.5
package org.rui.thread.newc; import java.text.DateFormat; import java.text.SimpleDateFormat; import ...
- stack计算表达式的值
9.52 使用stack对象处理带圆括号的表达式.遇到左圆括号时,将其标记下来.当你在一个左括号之后遇到右圆括号时,弹出stack对象中这两边括号之间的元素,直到遇到左括号,将左括号也一起弹出栈. 接 ...