首页 > 代码库 > 封装 用canvas绘制直线的函数--面向对象
封装 用canvas绘制直线的函数--面向对象
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用面向对象的思想 封装 在canvas绘制直线的函数</title> 6 </head> 7 <body> 8 <canvas id="cv"></canvas> 9 </body>10 </html>11 <script>12 var cv = document.getElementById("cv");13 cv.width = 600;14 cv.height = 300;15 cv.style.border = "1px solid red";16 var ctx = cv.getContext("2d");17 18 //面向对象编程19 //1 创建构造函数20 //2 构造函数的原型设置21 //3 调用的时候，通过 new+构造函数 来创建一个对象（实例）22 23 //构造绘制直线的函数24 function drawLine(parameters) {25 this.init(parameters);26 }27 //替换原型对象实现继承28 drawLine.prototype = {29 constructor: drawLine,30 init: function (parameters) {31 this.ctx = parameters.ctx;32 this.startX = parameters.points[0];33 this.startY = parameters.points[1];34 this.endX = parameters.points[2];35 this.endY = parameters.points[3];36 //以下3个属性，可以不设置，用短路运算实现添加默认属性值37 this.lineWidth = parameters.lineWidth || 1;38 this.lineDash = parameters.lineDash || [];39 this.strokeStyle = parameters.strokeStyle || "#000";40 },41 //原型中，一般用来储存对象的方法或者共有的属性42 stroke: function () {43 this.ctx.beginPath();44 this.ctx.moveTo(this.startX, this.startY);45 this.ctx.lineTo(this.endX, this.endY);46 this.ctx.lineWidth = this.lineWidth;47 this.ctx.setLineDash(this.lineDash);48 this.ctx.strokeStyle = this.strokeStyle;49 this.ctx.stroke();50 }51 };52 53 //调用构造函数，传入参数54 var line = new drawLine({55 ctx: ctx,56 points: [100, 100, 300, 100],57 lineDash: [4, 2],58 strokeStyle: "red"59 });60 line.stroke();61 var line2 = new drawLine({62 ctx: ctx,63 points: [100, 200, 300, 200],64 lineWidth: 665 });66 line2.stroke();67 </script>
效果图：
封装 用canvas绘制直线的函数--面向对象
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。