<!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. Mach-O 的动态链接（Lazy Bind 机制）

    ➠更多技术干货请戳:听云博客 动态链接 要解决空间浪费和更新困难这两个问题最简单的方法就是把程序的模块相互分割开来,形成独立的文件,而不再将它们静态的链接在一起.简单地讲,就是不对那些组成程序的目标文 ...

  2. Hello Jexus

    一.关于 CentOS CentOS(Community Enterprise Operating System)是Linux发行版之一,它是来自于Red Hat Enterprise Linux依照 ...

  3. (转)linux下和云端通讯的例程, ubuntu和openwrt实验成功(一)

    一.  HTTP请求的数据流总结#上传数据, yeelink的数据流如下POST /v1.0/device/4420/sensor/9089/datapoints HTTP/1.1Host: api. ...

  4. 苹果台式一体机笔记本安装win双系统攻略教程

    步骤 序:win系统下载 :http://www.itellyou.cn 选择要安装的系统进行下载,本文以win7为例   进入苹果系统,左上角——前往——实用工具——BootCamp 助理 点击继续 ...

  5. Quartz.net开源作业调度框架使用详解

    前言 quartz.net作业调度框架是伟大组织OpenSymphony开发的quartz scheduler项目的.net延伸移植版本.支持 cron-like表达式,集群,数据库.功能性能强大更不 ...

  6. Django：手把手带你入门

    一.开发环境: Python:2.7:PyCharm 4 二.Django的安装: 打开Pycharm --> 新建项目--> 看图操作--> 自动安装Django环境 三.创建第一 ...

  7. android快捷开发之Retrofit网络加载框架的简单使用

    大家都知道,安卓最大的特点就是开源化,这自然会产生很多十分好用的第三方API,而基本每一个APP都会与网络操作和缓存处理机制打交道,当然,你可以自己通过HttpUrlConnection再通过返回数据 ...

  8. 【目录】Zookeeper目录

    Zookeeper的目录整理如下 1. [分布式]分布式架构 2. [分布式]一致性协议 3. [分布式]Chubby与Paxos 4. [分布式]Zookeeper与Paxos 5. [分布式]Zo ...

  9. JavaScript实现图片轮播组件

    效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供 ...

  10. Linux用户体系和文件权限总结

    一.           Linux系统用户和用户组相关文件 1.  /etc/passwd文件 这个passwd文件是Linux用户信息文件.文件格式说明如下: root:x:0:0:root:/r ...