基于html5 canvas做批改作业的小插件html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法

 let self = this; this.canvasNode = document.createElement('canvas'); let styleString = this.utils.formatStyle(CANVAS_STYLE); // CANVAS_STYLE是canvas的样式 this.canvasNode.setAttribute('id','canvas'); // 一定要设置这width 和 height let ratio = this.imgNode.width / this.imgNode.height, height = this.imgNode.height, width = this.imgNode.width; let tempWidth , tempHeight; // 按比例伸缩 if(ratio >= window.innerWidth / window.innerHeight){ if(width > window.innerWidth){ tempWidth = window.innerWidth; tempHeight = height * window.innerWidth / width; } else { tempWidth = width; tempHeight = height; } }else{ if(height > window.innerHeight){ tempWidth = width * window.innerHeight / width; tempHeight = window.innerHeight; }else{ tempWidth = width; tempHeight = height; } } this.canvasNode.height = tempHeight; this.canvasNode.width = tempWidth; styleString = Object.assign({'width': tempWidth, 'height': tempHeight}, CANVAS_STYLE); this.canvasNode.setAttribute('style', styleString); let ctx = this.canvasNode.getContext('2d'), startX = 0, startY = 0; let image = new Image() ; image.setAttribute("crossOrigin",'Anonymous') // 加时间戳因为这图片的域名没设置跨域https://www.jianshu.com/p/c3aa975923de image.src = this.imgNode.src + '?t=' + new Date().getTime(); image.height = tempHeight; image.width = tempWidth; image.onload = function(){ ctx.drawImage(image, 0, 0, tempWidth, tempHeight); } // 鼠标移动事件 let mousemoveFn = function(e) { ctx.beginPath(); ctx.lineWidth = 3; ctx.strokeStyle = self.currentColor; if(startX == e.clientX - self.canvasNode.offsetLeft || startY === e.clientY - self.canvasNode.offsetTop ) return ctx.moveTo(startX,startY); ctx.lineTo(e.clientX - self.canvasNode.offsetLeft , e.clientY - self.canvasNode.offsetTop ); ctx.stroke(); startX = e.clientX - self.canvasNode.offsetLeft; startY = e.clientY - self.canvasNode.offsetTop ; // 37是header的高度 } // 鼠标按下事件 this.canvasNode.addEventListener("mousedown",function(e){ startX = e.clientX - self.canvasNode.offsetLeft; startY = e.clientY - self.canvasNode.offsetTop ; // 如果在mouseup那里记录 则在撤回时候要做多一个步骤 let imageData = ctx.getImageData(0,0, self.canvasNode.width, self.canvasNode.height); self.imageDataArray.push(imageData); // 这imageDataArray用来记录画笔的笔画 self.canvasNode.addEventListener("mousemove", mousemoveFn, false); },false); this.canvasNode.addEventListener('mouseup', function(e){ self.canvasNode.removeEventListener('mousemove', mousemoveFn); }); this.bgNode.appendChild(this.canvasNode);