<!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. hbase协处理器编码实例

    Observer协处理器通常在一个特定的事件(诸如Get或Put)之前或之后发生,相当于RDBMS中的触发器.Endpoint协处理器则类似于RDBMS中的存储过程,因为它可以让你在RegionSer ...

  2. Bluemix中国版体验（二）

    从上一篇到现在大概有一个多月了.时隔一个月再登录中国版Bluemix,发现界面竟然更新了,现在的风格和国际版已经基本保持一致!这次我们来体验一下Mobile Service.不过mobile serv ...

  3. 【转】 XenServer的架构

    一.Dom0或者控制域 XenServer从安装上看起来像是一个Linux,所以有些同学认为XenServer就是Linux或者是Linux修改的.真实的XenServer和Linux的关系是这样的: ...

  4. C#单元测试面面观

    标题有点标题党,但相信各位看完这篇文章一定会所收获,如果之前没有接触过单元测试或了解不深通过本文都能对单元测试有个全新认识.本文的特点是不脱离实际,所测试的代码都是常见的模式. 写完这篇文章后,我看了 ...

  5. Windbg Extension NetExt 使用指南 【2】 ---- NetExt 的基本命令介绍

    摘要 : 本章节介绍NetExt常用的命令. 并且对SOS进行一些对比. NetExt的帮助 要想玩好NetExt, 入门就得看帮助. 看NetExt的帮助可以调用!whelp 命令. 这样hi列举出 ...

  6. 企业IT管理员IE11升级指南【16】—— 使用Compat Inspector快速定位IE兼容性问题

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  7. jQuery +ajax +json+实现分页

    正文 首先我们创建一般处理程序,来读取数据库中内容,得到返回值. 创建文件,GetData.ashx. 我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据 代码 ...

  8. python常用模块

    os模块 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cd os ...

  9. MSSQLSERVER添加c# clr程序集的使用方法

    前言 MSSQLSERVER提供程序集,无疑可以让编程人员更加便捷的操作数据库数据,比如c#写的函数,可以在数据库当作sql的函数使用,你想想他对不熟悉数据库的程序员来说是有多么的嗨.这么好的机制,大 ...

  10. Oracle_数据处理

    数据操纵语言 DML(Data Manipulation Language – 数据操纵语言) 可以在下列条件下执行: - 向表中插入数据 - 修改现存数据 - 删除现存数据* 事务是由完成若干项工作 ...