<!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. Android 扫描条形码（Zxing插件）

    使用Android Studio 一.在build.gradle(Module:app)添加代码  下载,调用插件 1 apply plugin: 'com.android.application' ...

  2. git init和git init -bare区别

    1 Git init  和 git init –bare 的区别 用"git init"初始化的版本库用户也可以在该目录下执行所有git方面的操作.但别的用户在将更新push上来的 ...

  3. x01.os.22: ubuntu 常用设置

    新组装了个 64 位电脑,i5 CPU,进入 ubuntu 后,又是一通搜索设置,整理如下,以备后用. 安装 .dep 包 sudo dpkg -i [filename.dep] 在 ubuntu 中 ...

  4. AutoMapper使用中的问题

    指定值只会执行一次 public class MomanBaseProfile : Profile { public MomanBaseProfile() { CreateMap<Request ...

  5. mono for android 自定义titleBar Actionbar 顶部导航栏 修改 样式 学习

    以前的我是没有做笔记的习惯的,学习了后觉得自己能记住,但是最近发现很多学的东西都忘记了,所有现在一有新的知识,就记下来吧. 最近又做一个mono for android 的项目 这次调整比较大,上次做 ...

  6. 腾讯云上免费部署HTTPS

    接上篇<腾讯云下安装 nodejs + 实现 Nginx 反向代理>,想从头一步到位的同学建议从上篇文章开始阅读.本文将继续介绍如何通过 Nginx 免费部署HTTPS. 留意下,这里的“ ...

  7. 自制文件上传JS控件，支持IE、chrome、firefox etc.

    (function() { if (window.FileUpload) { return; } window.FileUpload = function (id, url) { this.id = ...

  8. Swift3中函数的使用

    前言:前不久,Swift语言也更新到了3.0版本,对编程有一定基础的朋友一定不会对函数这个概念陌生.而Swift语言中的函数也是大同小异的,今天就跟着小编来学习一下Swift3中函数的不一样的用法. ...

  9. Android之自定义View的实现

    对于学习Android开发的小童鞋对于自定义View一定不会陌生,相信大家对它是又爱又恨,爱它可以跟随我们的心意设计出漂亮的效果:恨它想要完全流畅掌握,需要一定的功夫.对于初学者来说确实很不容易,网上 ...

  10. ES6转换器之Babel

    ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都 ...