<!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. CocoaPods的安装、使用、以及遇到的问题

    CocoaPods是什么? 当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,AFNetWorking等等.可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而 ...

  2. Android之Dedug--Circular dependencies cannot exist in AnimatorSet

    今日,在学习AnimatorSet时,使用play.with.after.before时,代码书写如下: ObjectAnimator animator1 = ObjectAnimator.ofFlo ...

  3. 完美解决CodeSmith无法获取MySQL表及列Description说明注释的方案

    问题描述: CodeSmith是现在比较实用的代码生成器,但是我们发现一个问题: 使用CodeSmith编写MySQL模板的时候,会发现一个问题:MySQL数据表中的列说明获取不到,也就是column ...

  4. Oracle Standard Error 列表

    今天,我特意从网上找了一些,以及自己平时总结的,关于错误编号和说明,平时我们在写项目的时候,往往是可能会出现下面这些错误,例如:违反唯一约束,无效的会话ID,等等.希望对大家有点帮助!可以看看,如果有 ...

  5. openfire的组件(Component)开发

    在之前的文章<Openfire阶段实践总结>中提到过一种openfire的扩展模式Compoent.本文将主要探讨对这种模式的应用与开发方法. 内部与外部组件介绍 在openfire中的许 ...

  6. 用Taurus.MVC 做个企业站（上）

    前言: 之前是打算写一篇文章叫:Taurus.MVC 从入门到精通,一篇完事篇! 后来转指一念,还是把教程集在这个企业站项目上吧!!! 企业站风格: 之前发过一个帮师妹写的企业站:最近花了几个夜晚帮师 ...

  7. Centos 7.0 安装Mono 3.4 和 Jexus 5.6

    2013-07-26 写过一篇<CentOS 6.3下 安装 Mono 3.2 和Jexus 5.4>,CentOS 7在CentOS 6的基础上有很大的调整,本文是这篇文章的更新,主要介 ...

  8. RCP:ISourceLocator翻译

    org.eclipse.debug.core.model.ISourceLocator A source locator locates source elements for stack frame ...

  9. 好好了解一下Cookie

    Cookie的诞生 由于HTTP协议是无状态的,而服务器端的业务必须是要有状态的.Cookie诞生的最初目的是为了存储web中的状态信息,以方便服务器端使用.比如判断用户是否是第一次访问网站.目前最新 ...

  10. 高性能的关键：Spring MVC的异步模式

    我承认有些标题党了,不过话说这样其实也没错,关于“异步”处理的文章已经不少,代码例子也能找到很多,但我还是打算发表这篇我写了好长一段时间,却一直没发表的文章,以一个更简单的视角,把异步模式讲清楚. 什 ...