<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>封装矩形构造函数,扇形构造函数</title> <style> canvas{ border: 1px solid green; } </style> </head> <body> <!-- 封装矩形构造函数,扇形构造函数 --> <canvas width="500" height="500" id="canvas"></canvas> </body> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); function toAngle(radian){ return radian*180/Math.PI; } function toRadian(angle){ return angle*Math.PI/180; } // 封装矩形 function Rect(obj){ for(var key in obj){ this[key] = obj[key]; } } Rect.prototype = { constuctor : Rect, stroke : function(){ if(this.strokeStyle){ this.ctx.strokeStyle = this.strokeStyle; } this.ctx.strokeRect(this.x0,this.y0,this.width,this.height); }, fill : function(){ if(this.fillStyle){ this.ctx.fillStyle = this.fillStyle; } this.ctx.fillRect(this.x0,this.y0,this.width,this.height) } } var rect = new Rect({ ctx : ctx, x0 : 100, y0 : 100, width : 100, height : 100 }) rect.stroke(); //rect.fill(); //扇形封装 function Shan(obj){ for(var key in obj){ this[key] = obj[key]; } } Shan.prototype = { constructor : Shan, stroke : function(){ this.ctx.moveTo(this.x0,this.y0); this.ctx.arc(this.x0,this.y0,this.randius,toRadian(this.start),toRadian(this.end)); this.ctx.closePath(); this.ctx.stroke(); }, fill : function(){ this.ctx.moveTo(this.x0,this.y0); this.ctx.arc(this.x0,this.y0,this.randius,toRadian(this.start),toRadian(this.end)); this.ctx.fill(); } } var shan = new Shan({ ctx : ctx, x0 : 200, y0 : 340, randius : 50, start : -90, end : 60 }) shan.stroke(); //shan.fill(); </script> </html>