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) 输出 ...
随机推荐
- vue.JS 介绍
vueJS 介绍 首先,vueJS 是我很早之前就想要接触学习的东西,但是呢,一直没时间,主要是在学校,事太多,没心思定下心来学习,我学生生涯的最后一个假期的第一天晚上,万事开头难,那就先写点儿什么东 ...
- 07: mysql锁和事物隔离
MySQL其他篇 目录: 1.1 MySQL中的事物 1.2 mysql中锁 1.1 MySQL中的事物返回顶部 1.InnoDB事务原理 1. 事务(Transaction)是数据库区别于文件系统的 ...
- 集合框架-Collection与List集合
对象数组的内存图解: 集合的继承体系图解: * 数组和集合的区别? * A:长度区别 * 数组的长度固定 * 集合长度可变 * B:内容不同 * 数组存储的是同一种类型的元素 * 而集合可以存储不同类 ...
- bzoj 3325 密码 - Manacher
题目传送门 需要root权限的传送点 题目大意 已知一个串,以每个字符为中心的最长回文串长,以及每两个字符中间为中心的最长回文串长.求字典序最小的这样一个串.题目保证有解. 考虑Manacher的过程 ...
- QML获取随机颜色
rect.color =);//random返回0~1的随机数
- HTML DOM open() 方法
HTML DOM Window 对象 定义和用法 open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口. 语法 window.open(URL,name,features,replace ...
- cmd copy命令 文件复制【转】
本文转载自:https://www.jb51.net/article/18981.htm copy,中文含义为“复制”,一个很容易见名知意的命令,它的作用是复制文件,用法十分简单:copy 源文件 目 ...
- linux内核中的LPM是什么?
答: 是usb的链接电源管理(Link Power Management),这是一个与usb硬件相关的能力,主机就能自动把设备设置成低功耗状态
- 螺旋折线（可能是最简单的找规律）【蓝桥杯2018 C/C++ B组】
标题:螺旋折线 如图p1.png所示的螺旋折线经过平面上所有整点恰好一次. 对于整点(X, Y),我们定义它到原点的距离dis(X, Y)是从原点到(X, Y)的螺旋折线段的长度. 例如dis(0 ...
- How to know the directory size in CENTOS 查看文件夹大小
Under any linux system, you want to use the command du. (Disk Usage) Common usage is : du -sh file(s ...