有关于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相关的技术知识点,通过参考网上的一些资料文章,学着利用简单的数学和物理知识点实现了一些比较有趣的动画效果,最近刚好翻看到以前的代码,所以这次将这些代码实践 ...
随机推荐
- 【python】nuitka封装python
官网:http://nuitka.net/doc/user-manual.html python打包工具对比:http://blog.csdn.net/qwemicheal/article/detai ...
- express中的路由
一.读取静态文件 基本代码: "use strict"; const express = require("express"); let app = expre ...
- iOS打包测试
iOS开发中,怎么打包为ipa格式的软件包以及怎么安装到手机终端上. (我的开发环境为Xcode6.1.1 )作为个人开发者(当然我的开发者帐号为个人开发者帐号,而不是企业开发者帐号),对于自己来说, ...
- 模拟提交API数据Pyqt版
其实这个模拟提交数据之前已经写过篇: Python requests模拟登录 因为现在在做的项目中需要一个debug请求调试API,用PHP的CURL写了一个,又因Pyqt更能直观灵活的显示请求的参数 ...
- JS 数据类型转换
JS 数据类型转换 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...
- Java Spring的IoC和AOP的知识点速记
Spring简介 Spring解决的最核心的问题就是把对象之间的依赖关系转为用配置文件来管理,这个是通过Spring的依赖注入机制实现的. Spring Bean装配 1. IOC的概念以及在Spri ...
- Linux 2.6内核中新的锁机制--RCU
转自:http://www.ibm.com/developerworks/cn/linux/l-rcu/ 一. 引言 众所周知,为了保护共享数据,需要一些同步机制,如自旋锁(spinlock),读写锁 ...
- EF for MySql 开发配置手册
执行MySQL安装程序,安装MySQL For Visual Studio和Connector/NET 执行命令: Install-Package EntityFramework Install-Pa ...
- NetMQ(三): 发布订阅模式 Publisher-Subscriber
ZeroMQ系列 之NetMQ 一:zeromq简介 二:NetMQ 请求响应模式 Request-Reply 三:NetMQ 发布订阅模式 Publisher-Subscriber 四:NetMQ ...
- svn: how to set the executable bit on a file?
http://stackoverflow.com/questions/17846551/svn-how-to-set-the-executable-bit-on-a-file svn uses pro ...