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) 输出 ...
随机推荐
- spring @Value注解#和$区别
一直以来,在使用@Value注解的时候,都是使用#的风格@Value("#{topic.topicName}"),但是也经常会看到@Value("${topic.topi ...
- UUID实现之一twitter的分布式自增IDsnowflake算法
Twitter的分布式自增ID算法snowflake (Java版) 概述 分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点 ...
- java常用代码段整理（持续更新）
FileWriter指定编码格式 FileWriter 默认是用(ISO-8859-1 or US-ASCII)西方编码的,总之不是UTF-8的,而FileWriter类有getEncoding方法, ...
- 【题解】Luogu SP3267 DQUERY - D-query
原题传送门 这题和Luogu P1972 [SDOI2009]HH的项链很像,只是数据大小有些差别,题解 我博客里对莫队的介绍 我们在排序询问时,普通是这样qaq inline bool cmp(re ...
- Vmware 安装centos7与网络配置
一.下载linux镜像 下载地址:http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1804.iso 二.创 ...
- gitlab服务器迁移
公司更换了新的服务器,需要把原先的gitlab迁移到新的服务器上. 1.迁移准备工作和思路:从a服务器迁移到b服务器,由于Gitlab自身的兼容性问题,高版本的Gitlab无法恢复低版本备份的数据,需 ...
- 20145325张梓靖 《网络对抗技术》 MSF基础应用
20145325张梓靖 <网络对抗技术> MSF基础应用 实验内容 掌握metasploit的基本应用方式以及常用的三种攻击方式的思路 主动攻击,即对系统的攻击,不需要被攻击方配合,这里以 ...
- Codeforces 917F Substrings in a String - 后缀自动机 - 分块 - bitset - KMP
题目传送门 传送点I 传送点II 传送点III 题目大意 给定一个字母串,要求支持以下操作: 修改一个位置的字母 查询一段区间中,字符串$s$作为子串出现的次数 Solution 1 Bitset 每 ...
- ERROR: please install the following Perl modules before executing ./mysql_install_db
centos7.5 安装mysql数据库报错 问题: [root@db02-52 scripts]# ./mysql_install_db --user=mysql --basedir=/applic ...
- Java.util.properties读取配置文件分析
Java.util.properties API链接: https://docs.oracle.com/javase/8/docs/api/java/util/Properties.html Clas ...