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) 输出 ...
随机推荐
- c++实现“扫描检测硬件改动”
这里需要用到cfgmgr32.h,参考了网上好几篇博文. #include <windows.h> #include <stdio.h> #include <cfgmgr ...
- 面试必问：Spring循环依赖的三种方式
引言:循环依赖就是N个类中循环嵌套引用,如果在日常开发中我们用new 对象的方式发生这种循环依赖的话程序会在运行时一直循环调用,直至内存溢出报错.下面说一下Spring是如果解决循环依赖的. 第一种: ...
- python简说（二十九）线程，进程
进程: 一些资源的集合. 一个进程里面最少有一个线程,主线程.线程: 程序执行的最小单位. import threadingfrom threading import Threadimport tim ...
- 【Python55--爬虫：代理】
一.反爬虫之隐藏 1.网站检查访问的是正常用户还是程序,关键在于User-Agent 1).第一种方法:采用header --修改header(两种方法): --> 在Request之前通过h ...
- 5.sql2008分组与嵌套
1.Group by基本介绍;2.Having的使用;3.分组综合应用;4.子查询基本介绍;5.In/Exists/Any/Some/All;6.子查询综合应用; 1.Group by基本介绍:依据B ...
- 【JS】JavaScript中innerHTML与innerText，createTextNode的区别
innerHTML和innerText 它们都会把元素内内容替换掉,区别在于: innerHTML 会把替换内容里的 HTML 标记解释执行. innerText 会把替换内容里的 HTML 标记原样 ...
- [分享]Active-HDL 9.2 安装
Download 点击下载Active-HDL 9.2 How to Install ? 解压后依次进行以下操作 1.运行Active_HDL_9.2sp1_main_setup.exe,允许程序所有 ...
- HDU 3848 CC On The Tree（树形dp）
http://acm.hdu.edu.cn/showproblem.php?pid=3848 题意: 求一棵树上两个叶子结点之间的最短距离. 思路: 两个叶子节点之间一定会经过非叶子节点,除非只有两个 ...
- C# 获取程序运行目录
string a = "BaseDirectory:" + AppDomain.CurrentDomain.BaseDirectory + "\r\n" + & ...
- 项目Alpha冲刺——代码规范、冲刺任务与计划
作业要求 这个作业属于哪个课程 软件工程1916-W(福州大学) 这个作业要求在哪里 项目Alpha冲刺 团队名称 基于云的胜利冲锋队 项目名称 云评:高校学生成绩综合评估及可视化分析平台 这个作业的 ...