canvas功能函数
封装一下常用的函数,
输入:通过一些固定的值，得到一个圆形,一个心形,一个波浪,一个涟漪,一个抛物线,一个自由弹起的过程。
返回:x,y坐标。
注意：
(1)坐标轴的位置,有的在0,0有的可能不在。
(2)有些是随机生成x,y有些希望均匀分布(均匀分布需要知道一共多少点)
(3)某些模块,某些特定东西生成的方式,比如一个越来越细的直线,一个颜色越来越淡的直线。
(4)熟练的记忆某些函数的特别之处。
1.如果想随机要一个正负的数.
Math.random()*2-1
如果想增幅是10的话
(Math.random()*2-1)*10
2.遇到边界问题的解决。
//边界值判断小于0或者大于最大值,那么cx,cy变为相反方向的改变
if(this.data[i].x>this.cw||this.data[i].x<0){
this.data[i].cX = -this.data[i].cX;
}
if(this.data[i].y>this.ch||this.data[i].y<0){
this.data[i].cY = -this.data[i].cY;
}
3.画虚线的函数。
//画虚线方法
CanvasRenderingContext2D.prototype.dashedLineTo = function (fromX, fromY, toX, toY, pattern) {
// default interval distance -> 5px
if (typeof pattern === "undefined") {
pattern = 5;
}
// calculate the delta x and delta y
var dx = (toX - fromX);
var dy = (toY - fromY);
var distance = Math.floor(Math.sqrt(dx*dx + dy*dy));
var dashlineInteveral = (pattern <= 0) ? distance : (distance/pattern);
var deltay = (dy/distance) * pattern;
var deltax = (dx/distance) * pattern;
// draw dash line
this.beginPath();
for(var dl=0; dl<dashlineInteveral; dl++) {
if(dl%2) {
this.lineTo(fromX + dl*deltax, fromY + dl*deltay);
} else {
this.moveTo(fromX + dl*deltax, fromY + dl*deltay);
}
}
this.stroke();
};
4.画扇形
//扇形
CanvasRenderingContext2D.prototype.sector = function(x,y,r,starAng,endAng){
this.save();
this.beginPath();
this.moveTo(x,y);
this.arc(x,y,r,starAng*Math.PI/180,endAng*Math.PI/180,false);//最后一个参数是false
this.closePath();
this.restore();
return this;
}
5.阴影 这个既可以渲染长方形，又可以渲染字体。
this.ctx.shadowColor = "rgba(0,0,0,0.2)";
this.ctx.shadowBlur = 6;
this.ctx.shadowOffsetX=3;
this.ctx.shadowOffsetY=3;
6.写字体。
ctx.fillStyle = '#2c2f34';
ctx.font = "16px Microsoft YaHei";
ctx.fillText("nihao",50,50)
ctx.fill();
7.
8.
9.
10
var yant = {
num:function(min,max){
return Math.random()*(max-min)+min
},
//产生color
color:function(){
return 'rgba('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')';
}
}
11.自己为了每次快速开发，瞎搞的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#btn{position: absolute;bottom: 100px;left:50%;transform: translateX(-50%);z-index: 10;opacity: 0.5;}
button{padding:5px;}
</style>
</head>
<body>
<div id="btn"></div>
<script>
window.onload = function(){
var piao = new Piao()
var cxt = piao.cxt;
cxt.fillStyle = "black";
cxt.beginPath()
cxt.fillRect(0,0,piao.canvasWidth,piao.canvasHeight)
cxt.stroke()
cxt.closePath()
}
function Piao(){
this.canvas = null //容器canvas
this.canvasWidth = null
this.canvasHeight = null
this.isBody = false //容器是不是document.body
this.cxt = null //context
this._init();
}
Piao.prototype = {
constructor:'Piao',
_init:function(){
window.requestAnimFrame = ( function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ) {
window.setTimeout( callback, 1000 / 60 );
};
})();
//创建元素
this._createCanvas();
//添加事件
this._addEvent();
},
_createCanvas:function(container){
if(typeof container == 'string'){
container = document.querySelector(container)
}
if(!container){
container = container || document.body;
this.isBody = true;
}
var ele = document.createElement("canvas");
ele.id = "canvas";
ele.value = "sorry,your browser can not support canvas!";
//ele.style.width = 100%;
//ele.style.height = 100%;
this.cxt = ele.getContext('2d');
container.appendChild(ele);
this.canvas = ele;
},
_addEvent:function(){
/*
document.addEventListener('mousemove',documentMousemove,false);
document.addEventListener('mousedown',documentMousedown,false);
document.addEventListener('mouseup',documentMouseup,false);
canvas.addEventListener('touchstar',canvasTouchStar,false);
canvas.addEventListener('touchmove',canvasTouchMove,false);
*/
window.addEventListener('resize',this._windowResizeEvent.bind(this),false)
this._windowResizeEvent();
},
_windowResizeEvent:function(){
if(this.isBody){
this.canvas.width = this.canvasWidth = window.innerWidth;
this.canvas.height = this.canvasHeight = window.innerHeight;
}
}
}
</script>
</body>
</html>
canvas功能函数的更多相关文章
- php文字、图片水印功能函数封装
一直在做有关php文字图片上传方面的工作,所以把此功能函数整理了一次,现在分享给大家. <?php class image { var $g_img; var $g_w; var $g_h; v ...
- php实现数字格式化，数字每三位加逗号的功能函数
原地址:http://www.jb51.net/article/73781.htm php实现数字格式化,数字每三位加逗号的功能函数,具体代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 ...
- HTML5 Canvas arc()函数//////////////////////(转)
HTML5 Canvas arc()函数 实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.get ...
- jQuery基础之（三）jQuery功能函数前缀及与window.onload冲突
1.jQuery功能函数前缀 在javascript中,开发者通常会编写一些小函数来处理各种操作细节,例如在用户提交表单时,要将文本框最前端和最末端的空格内容清理掉.而javascript中没有类似t ...
- Qt调用dll中的功能函数
声明: 事先我已经自己动手写了一个简单的dll文件(myDLL.dll),C版接口的.并且用我前两篇有关DLL文章里面的方法,从dll中导出了导入库(.lib)文件,dll中有两个函数,原型如下: ...
- Impala系列: Impala常用的功能函数
--=======================查看内置的函数--=======================hive 不需要进入什么内置数据库, 即可使用 show functions 命令列出 ...
- MATLAB 在同一个m文件中写多个独立的功能函数
MATLAB 在同一个m文件中写多个独立的功能函数,从而实现在外部可以直接调用这个文件中的某一个函数. 鉴于MATLAB的函数文件的函数名与文件名要一样,就需要有一个统一的接口来涵盖这些功能函数. 例 ...
- FunDA（10）－ 用户功能函数模式：User Function Model
前面我们提过:FunDA就像一个管道(PipeLine).管道内流动着一串数据(Data)或者运算指令(Action).管道的源头就是能产生纯数据的数据源(Source),跟着在管道的中间会有一些节点 ...
- python基础知识梳理-----4基本数据类型,list ,tuple 操作 ,增删该查，以及其他功能函数
一:列表的增加 1: append() lis = ['张三','李四','王二码子','李鹏智障'] lis.append('赵武') # 这种加法是放在最后 print(lis) 输出 ...
随机推荐
- ORA-38301: 无法对回收站中的对象执行 DDL/DML
我们是在生产系统中遇到,清空回收站,然后禁用回收站即可,这样后面就不会发生,单纯禁用可能仍会报错,因为不会自动清空回收站. purge recyclebin; alter system set rec ...
- mint-ui之toast使用（messagebox，indicator同理）
toast为消息提示框,支持自定义位置.持续时间和样式. 一,注意事项 方法1 引入整个 Mint UI 组件,并需要再次单独引入Toast组件 Toast,它并不是一个全局变量,需要先引入 im ...
- H5浏览器播放RTMP直播流实现切换
切换直播源的参考:http://blog.csdn.net/u012737182/article/details/73920830
- 寻找复杂背景下物体的轮廓（OpenCV / C++ - Filling holes）
一.问题提出 这是一个来自"answerOpenCV"(http://answers.opencv.org/question/200422/opencv-c-filling-hol ...
- Overture 5入门之如何设置延音线
延音线作为五线谱标记符合之一,是大家使用Overture时需要常用的一个基本标记符号.延音线是一条向上或向下弯曲的弧线,它的作用是将两个或两个以上的具有相同高音的音符来进行相连. 延音线作为再编曲演唱 ...
- python脚本解析json文件
python脚本解析json文件 没写完.但是有效果.初次尝试,写的比较不简洁... 比较烦的地方在于: 1,中文编码: pSpecs.decode('raw_unicode_escape') 2,花 ...
- Spring 学习——Spring框架结构、概念
maven项目结构 记忆:在一个项目中,project下一层级时src,也就是源文件,所有需要进行编译的文件都是在这个目录下,其实也就是这一个目录,然后向下扩展.在src目录下,存在main文件夹,里 ...
- FireMonkey 源码学习（2）
三.TControl FireMonkey重写了TControl的代码,实现了众多接口,如下图: 基类上实现了众多功能,这里不详细描述. 四.TEdit 编辑框是从TControl—TStyledCo ...
- html的进一步了解（更新中···）
(接上一次) 属性:表示事物的一些特征 属性又可分为两种: 标签属性和样式属性 两者的区别: 位置不一样 样式属性写在style中 标签属性写在标签内 写法不一样 样式属性是属性:属性值 标签属性是属 ...
- SpringBoot 整合携程Apollo配置管理中心
携程官网对apollo的使用讲解了很多种方式的使用,但是感觉一些细节还是没讲全,特别是eureka配置中心地址的配置 这里对springboot整合apollo说一下 >SpringBoot启动 ...