对于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几个新知识点的更多相关文章

  1. 自定义控件学习之canvas和paint相关知识点学习

    1,继承自view,实现ondraw方法: 初始化画笔,TextPaint paint,并设置画笔属性: paint.setFlags(Paint.ANTI_ALIAS_FLAG):画笔抗锯齿. pa ...

  2. 关于c#知识的学到的新知识点

    开头:对这段时间学习的小知识点做一个整理.希望自己能理清思路.当然如果能帮到大家那就更好了. 1.判断写法 !True=false 思考:以前判断一直写if(布尔变量==false),今天看到这个,才 ...

  3. UCS-2和UTF8的四个新知识点和新的疑问

    最初的unicode编码是固定长度的,16位,也就是2两个字节代表一个字符,这样一共可以表示65536个字符.显然,这样要表示各种语言中所有的字符是远远不够的.Unicode4.0规范考虑到了这种情况 ...

  4. C++11 新知识点

    翻了下新版的C++ Primer,新的C++ 11真是变化很大,新增了很多语法特性.虽然已经很久没在写C++了,但一直对这门经典语言很感兴趣的,大致看了看前几章基础部分,总结下新特性备个忘吧.估计也很 ...

  5. ES6的新知识点

    一.变量 原有变量: var的缺点: 1.可以重复声明 2.无法限制修改 3.没有块级作用域 新增变量: let :不能重复声明,变量-可以修改,块级作用域 const:不能重复声明,变量-不可以修改 ...

  6. 【干货系列之萌新知识点】python与变量和运算符

    一.注释 注释一行:# 为注释符 注释多行:'或者"为注释符 二.print输出 print()函数,作用是打印一些信息语屏幕上. 例如:print("hello world!&q ...

  7. Mysql新知识点150928

    1.select distinct(DATE_FORMAT(updatetime,'%Y-%m')) as updatetime from barcode where pid!=0 order by ...

  8. 8-2 canvas专题-线条样式

    8-2 canvas专题-线条样式 学习要点 对第五章知识进行简单的回顾和总结 进一步讲解canvas绘图相关的知识点 第八章内容介绍 在第八章中我们将对以前的知识进行简单的回顾,着重对canvas绘 ...

  9. 【Canvas真好玩】从黑客帝国开始

    前言 笔者之前有一段时间一直在学习Canvas相关的技术知识点,通过参考网上的一些资料文章,学着利用简单的数学和物理知识点实现了一些比较有趣的动画效果,最近刚好翻看到以前的代码,所以这次将这些代码实践 ...

随机推荐

  1. Sublime Text:Windows下配置C 编译环境和GDB调试环境

    写此文解决两个问题: 1.在Sublime Text中实现编译运行含有外部输入的C程序(如含有scanf的程序); 2.在程序运行完毕后不退出cmd,能继续用gdb调试程序. 一.MinGW 下载地址 ...

  2. Android selecter背景选择器使用

    android:drawable这个属性是必须的,默认时的背景图片. android:state_pressed布尔值.true指当用户点击或者触摸该控件的状态.默认为false android:st ...

  3. java servlet

    回顾 1三要素是什么? 入口(login.html)     处理(LoginServlet.java)  出口 (success.jsp) 2如何访问servlet http://IP:port/p ...

  4. 总结一下项目中遇到的分页问题,使用bootstrap-table来做的后台分页,大家可以借鉴一下 (分页第一篇)

    前台进入bootstrap的js和css文件,我就不多少了,另外要引进bootstrap-table的js和css 废话不多说,直接代码.   框架为ssm,代码很清楚 <div class=& ...

  5. 深入HashMap

    HashMap: 内部基于数组和单向链表 重要的变量有: Entry<K,V>[] table = (Entry<K,V>[]) EMPTY_TABLE:结点数组table中存 ...

  6. kettle系列-[KettleUtil]kettle插件,类似kettle的自定义java类控件

    该kettle插件功能类似kettle现有的定义java类插件,自定java类插件主要是支持在kettle中直接编写java代码实现自定特殊功能,而本控件主要是将自定义代码转移到jar包,就是说自定义 ...

  7. 手把手教你玩转nginx负载均衡(五)----配置后端服务器组

    引言 在前面几篇中,我们成功的搭建起了一台nginx服务器,所以我们要重复前面的步骤,把服务器的数量增加到3台以上,我这里已经建好了另外两台,分别是centos7-22,centos7-23,对应的i ...

  8. PHP 版本判断 version_compare() 函数

    在度娘中简单的找了下,判断当前PHP的版本是否高于某个版本,或者低于某个版本的方法 显示的结果基本上都是一样的,好吧,要不是我忘记了version_compare()这个函数我才不会去找度娘,果断找以 ...

  9. windows和linux平台下的通用时间测试函数

    Time.cpp ////////////////////////////////////////////////////////////////////////////// // Timer.cpp ...

  10. 简单谈谈NFC(转载自-tlex/pku_android)

    NFC是Near Field Communication缩写,又称近距离无线通信,是一种短距离的高频无线通信技术,允许电子设备之间进行非接触式点对点数据传输(在十厘米内)交换数据.这个技术由免接触式射 ...