有关于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相关的技术知识点,通过参考网上的一些资料文章,学着利用简单的数学和物理知识点实现了一些比较有趣的动画效果,最近刚好翻看到以前的代码,所以这次将这些代码实践 ...
随机推荐
- C语言中,头文件和源文件的关系(转)
简单的说其实要理解C文件与头文件(即.h)有什么不同之处,首先需要弄明白编译器的工作过程,一般说来编译器会做以下几个过程: 1.预处理阶段 2.词法与语法分析阶段 3.编译阶段,首先编译成纯汇编语句, ...
- 各种webservice调用地址
http://www.webxml.com.cn/zh_cn/web_services.aspx
- 关于python数据序列化的那些坑
-----世界上本来没那么多坑,python更新到3以后坑就多了 无论哪一门语言开发,都离不了数据储存与解析,除了跨平台性极好的xml和json之外,python要提到的还有自身最常用pickle模块 ...
- mongodb安装、启动、远程连接
1.现在mongodb安装包 mongodb-linux-x86_64-3.0.6.tgz 2.解压缩安装包 tar zxvf mongodb-linux-x86_64-3.0.6.tgz /opt ...
- opencv2.4更换为opencv3.1后,mxnet编译错误(libpng16.so.16)
编译显示错误为: /usr/bin/ld: warning: libpng16.so.16, needed by /usr/local/lib/libopencv_imgcodecs.so, not ...
- cmake cannot find package
cmake 找不到package,如 find_package (OpenMesh REQUIRED) 出现错误 在项目的文件夹中找到 FindOpenMesh.cmake 文件,将其所在路径添加到 ...
- VirusAnti_didiwei使用说明
前言 前段时间说要写的一个专杀框架敌敌畏,后改为强撸敌敌畏,以彰显样本查杀时的气势,现在第一版已经完成了,如下图所示,使用的时候强烈建议控制台使用放大模式,这样就可以看见我花了半天才画好了logo , ...
- Shell_1 简介
1 Shell 变量 只读变量 使用 readonly 命令可以将变量定义为只读变量,只读变量的值不能被改变. #!/bin/bash -x varName="AAA" echo ...
- solr update接口常用方法
solr索引数据更新接口:http://localhost:8080/solr/update 有以下一些操作可以通过update接口完成,只能使用post的形式提交数据. 1.添加索引 确保field ...
- javascript判断数据类型的各种方法
一.Object.prototype.toString方法(摘自http://javascript.ruanyifeng.com/stdlib/object.html#toc3) //不同数据类型的O ...