有关于canvas几个新知识点
对于canvas的初学者来说,以下几点应该是不知道的知识点:
1、canvas有兼容IE6/7/8的脚本文件 下载地址:https://github.com/arv/explorercanvas
2、用canvas对象获取的2d绘图上下文其实可以自己往里面扩展自己的绘图方法:如 绘制星星、画虚线等等
/**
画五角星的方法
参数:cxt canvas上下文
* x:星星的中心坐标 ,y: 星星的中心y轴坐标
*r : 星星中间尖的圆半径
*R : 星星外接圆半径
*rotation:星星逆时针旋转的角度
*lw: 线条宽度
*/
CanvasRenderingContext2D.prototype.fillStar = function( x, y , r, R,rotation,lw,color){
this.beginPath();
this.lineWidth=lw || 5;
this.fillStyle=color || '#000';
for (var i=0;i<5;i++){
this.lineTo(Math.cos((18+i*72-rotation)/180*Math.PI)*R+x , Math.sin(-(18+i*72-rotation)/180*Math.PI)*R+y);
this.lineTo(Math.cos((54+i*72-rotation)/180*Math.PI)*r+x , Math.sin(-(54+i*72-rotation)/180*Math.PI)*r+y);
}
this.closePath();
this.fill()
}
getElementById('canvas').getContext('2d').fillStar(100,100, 200,300, 0, 10, 'red') //画一个红色的边框为10的五角星
3、canvas还有很多新的api已经出台,但是浏览器支持不是很好,所以我们不常用,想知道canvas还有哪些新的api 可以去 http://www.w3.org/TR/2dcontext/ 看看
4、你想知道浏览器是否支持某个canvas的api 可以这样写
if(context.ellipse){
context.beginPath()
context.ellipse(400,400,200,300,0,0,2*Math.PI)
context.stroke()
//画一个中心在400,400,短半轴为200,长半轴为300,旋转角度为0 的一个椭圆
}else{
alert('您的浏览器不支持ellipse 的方法')
}
有关于canvas几个新知识点的更多相关文章
- 自定义控件学习之canvas和paint相关知识点学习
1,继承自view,实现ondraw方法: 初始化画笔,TextPaint paint,并设置画笔属性: paint.setFlags(Paint.ANTI_ALIAS_FLAG):画笔抗锯齿. pa ...
- 关于c#知识的学到的新知识点
开头:对这段时间学习的小知识点做一个整理.希望自己能理清思路.当然如果能帮到大家那就更好了. 1.判断写法 !True=false 思考:以前判断一直写if(布尔变量==false),今天看到这个,才 ...
- UCS-2和UTF8的四个新知识点和新的疑问
最初的unicode编码是固定长度的,16位,也就是2两个字节代表一个字符,这样一共可以表示65536个字符.显然,这样要表示各种语言中所有的字符是远远不够的.Unicode4.0规范考虑到了这种情况 ...
- C++11 新知识点
翻了下新版的C++ Primer,新的C++ 11真是变化很大,新增了很多语法特性.虽然已经很久没在写C++了,但一直对这门经典语言很感兴趣的,大致看了看前几章基础部分,总结下新特性备个忘吧.估计也很 ...
- ES6的新知识点
一.变量 原有变量: var的缺点: 1.可以重复声明 2.无法限制修改 3.没有块级作用域 新增变量: let :不能重复声明,变量-可以修改,块级作用域 const:不能重复声明,变量-不可以修改 ...
- 【干货系列之萌新知识点】python与变量和运算符
一.注释 注释一行:# 为注释符 注释多行:'或者"为注释符 二.print输出 print()函数,作用是打印一些信息语屏幕上. 例如:print("hello world!&q ...
- Mysql新知识点150928
1.select distinct(DATE_FORMAT(updatetime,'%Y-%m')) as updatetime from barcode where pid!=0 order by ...
- 8-2 canvas专题-线条样式
8-2 canvas专题-线条样式 学习要点 对第五章知识进行简单的回顾和总结 进一步讲解canvas绘图相关的知识点 第八章内容介绍 在第八章中我们将对以前的知识进行简单的回顾,着重对canvas绘 ...
- 【Canvas真好玩】从黑客帝国开始
前言 笔者之前有一段时间一直在学习Canvas相关的技术知识点,通过参考网上的一些资料文章,学着利用简单的数学和物理知识点实现了一些比较有趣的动画效果,最近刚好翻看到以前的代码,所以这次将这些代码实践 ...
随机推荐
- linux无法挂载u盘
一般插入u盘都会自动挂载,但有时挂载不了,错误提示:can't find /dev/sdb in /etc/fstab:这时可能是U盘坏了,我们当然不希望是这样.也有可能是U盘使用的接口不对应导致系统 ...
- WEB 用户指南 -- WEB 系统结构文档
本文描述了如何使用 WEB语言 编程.同时还包含了 WEAVE 和 TANGLE 程序的说明文档. WEB 程序 可以读取 WEB 文件,然后输出 TeX 文档 和 Pascal 程序. 使用 WEB ...
- 配置ntp服务
配置ntp服务(hadoop搭建可参考) 一:修改选定的服务器的本地时间 date -s '2016-10-07 16:29:30' +'%F %T' //需要设置的时间 二:修改后将时间写入到硬件时 ...
- HAProxy的安装与使用
在互联网时代中,后台系统架构,经常可以听到高可用集群.负载均衡集群之类的系统架构解决方案,其中,负载均衡有基于硬件的F5.Big-IP等,也有基于软件的LVS(基于Linux操作系统实现,性能可以和基 ...
- Android学习杂记
Jni接口学习资料: http://www.cnblogs.com/lsnproj/archive/2012/01/09/2317519.html classLoader和插件化: http://bl ...
- 动画系统(Mecanim补充)
设置状态机部分等在实践中总结. 状态机基础: 动画层 Animation Layers Unity 使用"动画层"来管理身体不同部分的复杂状态机. 动画状态机 Animati ...
- 纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,
HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt> ...
- Android 敏感 API 的说明
从中国的国情来看,Google 的诸多产品,包括 gmail,Android 官方市场 Google Play 正处于并将长期处于访问不了的状态.国内几亿网民也要生活,于是墙内出现了“百家争鸣”的场面 ...
- vim简明教程
在shell中新建一个文件 # vim a.txt vim有三种模式:一般模式.插入模式.底行模式 三种工作模式 1.命令模式 移动光标 hjkl yy 复制 nyy 从光标向下复制n行 0 移动光标 ...
- B/S系统常见缺陷整理和解决方案
最近部门整理了今年所有项目测试团队提出的BUG,筛选了几十个作为常规通用的缺陷,我根据这些缺陷内容,去掉和业务相关的知识,整理出了一份缺陷描述和解决方案. 其实WEB系统中常规的缺陷分类后也就那么多, ...