利用构造函数对canvas里面矩形与扇形的绘制进行一个封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封装矩形构造函数,扇形构造函数</title>
<style>
canvas{
border: 1px solid green;
}
</style>
</head>
<body>
<!-- 封装矩形构造函数,扇形构造函数 -->
<canvas width="500" height="500" id="canvas"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function toAngle(radian){
return radian*180/Math.PI;
}
function toRadian(angle){
return angle*Math.PI/180;
}
// 封装矩形
function Rect(obj){
for(var key in obj){
this[key] = obj[key];
}
}
Rect.prototype = {
constuctor : Rect,
stroke : function(){
if(this.strokeStyle){
this.ctx.strokeStyle = this.strokeStyle;
}
this.ctx.strokeRect(this.x0,this.y0,this.width,this.height);
},
fill : function(){
if(this.fillStyle){
this.ctx.fillStyle = this.fillStyle;
}
this.ctx.fillRect(this.x0,this.y0,this.width,this.height)
}
}
var rect = new Rect({
ctx : ctx,
x0 : 100,
y0 : 100,
width : 100,
height : 100
})
rect.stroke();
//rect.fill();
//扇形封装
function Shan(obj){
for(var key in obj){
this[key] = obj[key];
}
}
Shan.prototype = {
constructor : Shan,
stroke : function(){
this.ctx.moveTo(this.x0,this.y0);
this.ctx.arc(this.x0,this.y0,this.randius,toRadian(this.start),toRadian(this.end));
this.ctx.closePath();
this.ctx.stroke();
},
fill : function(){
this.ctx.moveTo(this.x0,this.y0);
this.ctx.arc(this.x0,this.y0,this.randius,toRadian(this.start),toRadian(this.end));
this.ctx.fill();
}
}
var shan = new Shan({
ctx : ctx,
x0 : 200,
y0 : 340,
randius : 50,
start : -90,
end : 60
})
shan.stroke();
//shan.fill();
</script>
</html>
利用构造函数对canvas里面矩形与扇形的绘制进行一个封装的更多相关文章
- JS的深度克隆,利用构造函数原型深度克隆
我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天来写写,JS中的深度克隆,这个在笔面试中,考的还是比较多的,主要是对象与数组的赋值,如果直接赋值的话,那么得到的是对象或者数组在堆里的地址, ...
- 2.10 C++利用构造函数限制对象的创建
参考: http://www.weixueyuan.net/view/6342.html 总结: 限制对象的创建.限制创建对象时能够按照我们需要的那样创建,而不能随意的创建对象. 类中显示地声明了任意 ...
- 《挑战30天C++入门极限》C++中利用构造函数与无名对象简化运算符重载函数
C++中利用构造函数与无名对象简化运算符重载函数 在完整描述思想之前,我们先看一下如下的例子,这个例子中的加运算符重载是以非成员函数的方式出现的: //程序作者:管宁 //站点:www.cn ...
- 利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果
利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果 前言 近日公司接到一个轨道系统的需求,需要将地铁线路及列车实时位置展示在大屏上.既然是大屏项目,那视觉效果当然是第一重点,咱们可以先来看看项 ...
- libgdx学习记录13——矩形CD进度条绘制
利用ShapeRenderer可进行矩形进度条的绘制,多变形的填充等操作. 这是根据角度获取矩形坐标的函数. public Vector2 GetPoint( float x, float y, fl ...
- c#在pictureBox控件上绘制多个矩形框及删除绘制的矩形框
在pictureBox上每次只绘制一个矩形框,绘制下一个矩形框时上次绘制的矩形框取消,代码如链接:https://www.cnblogs.com/luxiao/p/5625196.html 在绘制矩形 ...
- 利用CNN进行流量识别 本质上就是将流量视作一个图像
from:https://netsec2018.files.wordpress.com/2017/12/e6b7b1e5baa6e5ada6e4b9a0e59ca8e7bd91e7bb9ce5ae89 ...
- 【Canvas】311- 解决 canvas 在高清屏中绘制模糊的问题
点击上方"前端自习课"关注,学习起来~ 一.问题分析 使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊.如图: 因为 canvas 不是矢量图,而是像图片一样 ...
- 利用pandas读取Excel表格,用matplotlib.pyplot绘制直方图、折线图、饼图
利用pandas读取Excel表格,用matplotlib.pyplot绘制直方图.折线图.饼图 数据: 折线图代码: import pandas as pdimport matplotlib. ...
随机推荐
- 重写jquery serialize 方法
/**取表单中的对象 *attrName:为元素的的属性名称不设置则默认为name */ $.fn.serialize = function (attrName) { var ret = {}; if ...
- TOP100summit 2017:小米唐沐等大咖精心挑选的100个年度研发案例实践
2017年,机器学习.大数据.人工智能等词汇成为软件研发行业的主流,大前端.DevOps.区块链等技术方式成为热点方向:2017年,智能硬件开始成为新的焦点,这一年更被称为智能音箱井喷的一年:2017 ...
- Linux/Unix命令行安装weblogic软件
--通过java -jar wls1036_generic.jar启动安装weblogic软件进程: [weblogic@localhost mnt]$ java -jar wls1036_gener ...
- YARN架构设计详解
一.YARN基本服务组件 YARN是Hadoop 2.0中的资源管理系统,它的基本设计思想是将MRv1中的JobTracker拆分成了两个独立的服务:一个全局的资源管理器ResourceManager ...
- Nginx Upstream timed out (110: Connection timed out)
Nginx Upstream timed out (110: Connection timed out) – 运维生存时间 http://www.ttlsa.com/nginx/nginx-upstr ...
- sed与grep正则
string editor 流编辑器 sed编辑器是一行一行的处理内容,正在处理的内容存放在缓冲区内,处理完后 按照选项的规定进行输出或者修改文件 option: -n 静默模式结合p可以只输出修 ...
- python 使用set对列表去重,并保持列表原来顺序
# python 使用set对列表去重,并保持列表原来顺序 list1 = ['cc', 'bbbb', 'afa', 'sss', 'bbbb', 'cc', 'shafa'] for item i ...
- OC convertRect
举个例子: redView = [[UIView alloc]initWithFrame:CGRectMake(50, 100, 100, 100)]; redView.backgroundColor ...
- 浅析I/O处理过程与存储性能的关系
浅析I/O处理过程与存储性能的关系 https://community.emc.com/docs/DOC-28653 性能”这个词可以说伴随着整个IT行业的发展,每次新的技术出现,从硬件到软件大多数情 ...
- inter x86 emulator accelerator(HAXM installer) not compatible with windows
在SDK manager中遇到如下错误:这将导致AVD后期运行和启动方面的问题. 解决办法: 在如下的网址里面下载haxm-windows_v6_2_0这个文件的压缩包,自己手动安装即可.网站如下:点 ...