<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>用面向对象的思想 封装 在canvas绘制直线的函数</title>

 </head>

 <body>

     <canvas id="cv"></canvas>

 </body>

 </html>

 <script>

     var cv = document.getElementById("cv");

     cv.width = 600;

     cv.height = 300;

     cv.style.border = "1px solid red";

     var ctx = cv.getContext("2d");

     //面向对象编程

     //1 创建构造函数

     //2 构造函数的原型设置

     //3 调用的时候，通过 new+构造函数 来创建一个对象（实例）

     //构造绘制直线的函数

     function drawLine(parameters) {

         this.init(parameters);

     }

     //替换原型对象实现继承

     drawLine.prototype = {

         constructor: drawLine,

         init: function (parameters) {

             this.ctx = parameters.ctx;

             this.startX = parameters.points[0];

             this.startY = parameters.points[1];

             this.endX = parameters.points[2];

             this.endY = parameters.points[3];

             //以下3个属性，可以不设置，用短路运算实现添加默认属性值

             this.lineWidth = parameters.lineWidth || 1;

             this.lineDash = parameters.lineDash || [];

             this.strokeStyle = parameters.strokeStyle || "#000";

         },

         //原型中，一般用来储存对象的方法或者共有的属性

         stroke: function () {

             this.ctx.beginPath();

             this.ctx.moveTo(this.startX, this.startY);

             this.ctx.lineTo(this.endX, this.endY);

             this.ctx.lineWidth = this.lineWidth;

             this.ctx.setLineDash(this.lineDash);

             this.ctx.strokeStyle = this.strokeStyle;

             this.ctx.stroke();

         }

     };

     //调用构造函数，传入参数

     var line = new drawLine({

         ctx: ctx,

         points: [100, 100, 300, 100],

         lineDash: [4, 2],

         strokeStyle: "red"

     });

     line.stroke();

     var line2 = new drawLine({

         ctx: ctx,

         points: [100, 200, 300, 200],

         lineWidth: 6

     });

     line2.stroke();

 </script>

效果图：

封装 用canvas绘制直线的函数--面向对象的更多相关文章

  1. canvas绘制直线

    HTML5 <canvas>元素用于图形的绘制,该元素只是图形容器,必须使用javascript脚本绘制图形创建一个画布:<canvas id="myCanvas" ...

  2. canvas绘制直线和多边形基本操作

    <!DOCTYPE HTML> <html lang="en"> <body> <canvas id="canvas" ...

  3. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  4. 使用Canvas绘制图形的基本教程

    原文地址:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  5. HTML5之Canvas绘图——使用Canvas绘制图形的基本教程

    原文转自:http://www.cnblogs.com/picaso/archive/2012/11/26/2789077.html HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以 ...

  6. 第165天：canvas绘制圆环旋转动画

    canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...

  7. Canvas学习：封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  8. canvas教程(二) 绘制直线

    经过 canvas 教程(一) 简介 我们知道了 canvas 的一些基本情况 而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线 但是无论是直线还是曲线,我们 ...

  9. 学习Canvas绘图与动画基础 绘制直线（二）

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...

随机推荐

  1. Spark的StandAlone模式原理和安装、Spark-on-YARN的理解

    Spark是一个内存迭代式运算框架,通过RDD来描述数据从哪里来,数据用那个算子计算,计算完的数据保存到哪里,RDD之间的依赖关系.他只是一个运算框架,和storm一样只做运算,不做存储. Spark ...

  2. 设置WindowServer2012 时间同步NTP

    在powershell中以管理员身份运行以下命令即可 w32tm /config /manualpeerlist:pool.ntp.org /syncfromflags:MANUAL Stop-Ser ...

  3. JS or C#？不存在的脚本之争

    前言: 又来到了周末,小匹夫也终于有了喘口气写写博客的时间和精力.话说周五的下午,小匹夫偶然间晃了一眼蛮牛的QQ群,又看到了一个Unity3D开发中老生长谈的问题,“我的开发语言究竟是选择JavaSc ...

  4. 微软.Net 社区虚拟大会 -- 首日重点（dotnetConf 2016）

    6月7日--9日,为期三天的微软.NET社区虚拟大会正式在 Channel9 上召开. 在 Scott Hunter, Miguel de Icaza (Xamarin CTO) , ScottHan ...

  5. SSH隧道应用, 突破网络限制

    文/怡文圣美 这篇文章可以帮你解决下面三个问题: 不能直连服务器, 要先登陆跳板机, 造成客户端工具无法连接服务器. 服务器没有公网IP, 且只允许公司IP访问, 要在家里操作要先远程桌面到工作机再登 ...

  6. 【开源】知乎日报UWP 更新

    说明 大概十天之前我更新了一次APP,后来又仔细看了一下Store里的评论,发现还有几个地方没有改过来.于是前天晚上抽时间改了一下,顺便完善了一下UI体验. 没有看前面文章的童鞋可以看一下下面的链接: ...

  7. PropertyGrid控件由浅入深(一)：文章大纲

    Winform中PropertyGrid控件是一个非常好用的对象属性编辑工具,对于Key-Value形式的数据的处理也是非常的好用. 因为Property控件设计良好,在很小的空间内可以展示很多的内容 ...

  8. ABP框架 - 实体

    文档目录 本节内容: 实体类 聚合根类 领域事件 约定的接口 审计 软删除 活跃/消极 实体 实体变化事件 IEntity 接口 实体是DDD一个核心的概念.Eric Evans是这么描述的:“一个对 ...

  9. 《学技术练英语》PPT分享

    之前做的一个PPT,分享给博客园的同学. 下载地址: 学技术练英语.pdf 技术是靠自己去学的,学技术不能仅仅是看书看博客,最好是有实践,不管是做实验去验证,还是写各种代码去玩各种特性,还是造轮子都是 ...

  10. mongoose - 让node.js高效操作mongodb

    Mongoose库简而言之就是在node环境中操作MongoDB数据库的一种便捷的封装,一种对象模型工具,类似ORM,Mongoose将数据库中的数据转换为JavaScript对象以供你在应用中使用. ...