最近回家, 准备面试找工作, 闲下来的时候就有一些小想法想写, 今天下午就先写一个比较简单的, 没事闲的时候在手机上玩, 之后再看看完善一下布局和保存功能什么的.
预览地址: 移动端画板预览 https://differwy.github.io/mobile_board/board.html
移动端画板: html 代码: board.html
- <!doctype html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport"
- content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>canvas 画板 </title>
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- html,body{
- width: 100%;
- overflow: hidden;
- }
- ul,li{
- list-style: none;
- }
- html{
- font-size: 100px;
- }
- .content{
- display: flex;
- width: 100%;
- min-height: 100vh;
- flex-direction: column;
- }
- .ctrl_area{
- flex: 0 0 0.6rem;
- display: flex;
- align-items: center;
- width: 100%;
- border-bottom: 1px solid #000;
- }
- .canvas_area{
- flex: 1;
- display: flex;
- }
- .canvas_area canvas{
- flex: 1;
- width: 100%;
- }
- .color_select{
- flex: 0 0 20%;
- display: flex;
- width:50%;
- height: 0.2rem;
- justify-content: center;
- }
- .color_select .color_select_input{
- height: 100%;
- }
- .size_select{
- flex: 0 0 60%;
- display: flex;
- justify-content: space-around;
- height: 0.2rem;
- }
- .size_select .size_select_item{
- display: flex;
- flex:1;
- justify-content: center;
- height: 100%;
- }
- .size_select .size_select_item button{
- width: 0.5rem;
- height: 100%;
- }
- .clear_select{
- flex: 0 0 20%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- }
- .clear_canvas{
- font-size: 0.1rem;
- }
- </style>
- <script>
- ;(function(win, doc){
- function change(){
- doc.documentElement.style.fontSize = doc.documentElement.clientWidth * 100 / 375 + 'px';
- }
- win.addEventListener('DOMContentLoaded', change);
- win.addEventListener('resize', change);
- })(window, document);
- </script>
- </head>
- <body>
- <div class="content">
- <div class="ctrl_area">
- <div class="color_select">
- <input id="colorSelectInput" class="color_select_input" type="color">
- </div>
- <ul class="size_select">
- <li class="size_select_item"><button id="thickSize"> 钢笔 </button></li>
- <li class="size_select_item"><button id="middleSize"> 记号笔 </button></li>
- <li class="size_select_item"><button id="boldSize"> 马克笔 </button></li>
- </ul>
- <div class="clear_select">
- <a id="clearAll" class="clear_canvas" href="javascript:;"> 清空画布 </a>
- <a id="penType" class="clear_canvas" href="javascript:;"> 橡皮擦 </a>
- </div>
- </div>
- <div class="canvas_area">
- <canvas id="canvas"> 您的浏览器不支持 canvas, 请尽快升级!</canvas>
- </div>
- </div>
- <script src="js/draw.js?v=0.0.1"></script>
- <script src="js/board_event.js?v=0.0.1"></script>
- </body>
- </html>
事件 js: board_event.js
- 'use strict';
- var colorSelect = document.querySelector('#colorSelectInput');
- var thickSize = document.querySelector('#thickSize');
- var middleSize = document.querySelector('#middleSize');
- var boldSize = document.querySelector('#boldSize');
- var clearAll = document.querySelector('#clearAll');
- var penType = document.querySelector('#penType');
- document.addEventListener('DOMContentLoaded', function(){
- var board = new DrawBoard({
- el: '#canvas'
- });
- colorSelect.onchange = function(){
- console.log(colorSelect.value);
- board.changeColor(colorSelect.value);
- };
- thickSize.onclick = function(){
- board.changeSize(1);
- };
- middleSize.onclick = function(){
- board.changeSize(5);
- };
- boldSize.onclick = function(){
- board.changeSize(12);
- };
- clearAll.onclick = function(){
- board.clear();
- };
- penType.onclick = function(){
- if(board.getDrawType() == 1){
- penType.innerHTML = '画笔';
- board.setDrawType(2);
- }else{
- penType.innerHTML = '橡皮擦';
- board.setDrawType(1);
- }
- }
- });
画图 js: draw.js
- 'use strict';
- class DrawBoard {
- constructor(options){
- var sCanvas = options.el;
- if(sCanvas){
- this.initDOM(sCanvas);
- }
- this.drawType = 1; // 1: 画 2: 橡皮
- this.ctx = this.canvas.getContext('2d');
- this.init();
- }
- initDOM(sCanvas){
- this.canvas = document.querySelector(sCanvas);
- this.canvasBox = this.canvas.getBoundingClientRect();
- // console.log(this.canvas);
- console.log(this.canvasBox);
- // console.log(this.canvas.offsetWidth);
- // console.log(this.canvas.offsetHeight);
- this.canvas.width = this.canvasBox.width;
- this.canvas.height = this.canvasBox.height;
- }
- init(){
- this.draw();
- }
- draw(){
- var _this = this;
- this.canvas.addEventListener('touchstart', function(e){
- console.log(_this.ctx);
- _this.ctx.lineCap = 'round';
- _this.ctx.lineJoin = 'round';
- _this.mouseStart(e);
- _this.canvas.addEventListener('touchmove', _this.mouseMove.bind(_this));
- _this.canvas.addEventListener('touchend', _this.mouseEnd.bind(_this));
- });
- }
- mouseStart(e){
- var _this = this;
- var touch = e.touches[0];
- var startPoint = {
- x: touch.pageX - _this.canvasBox.left,
- y: touch.pageY - _this.canvasBox.top
- }
- console.log(touch);
- _this.ctx.beginPath();
- _this.ctx.moveTo(startPoint.x, startPoint.y);
- }
- mouseMove(e){
- var _this = this;
- var touch = e.touches[0];
- var movePoint = {
- x: touch.pageX - _this.canvasBox.left,
- y: touch.pageY - _this.canvasBox.top
- }
- _this.ctx.lineTo(movePoint.x, movePoint.y);
- if(_this.drawType == 1){
- _this.ctx.stroke();
- }else{
- _this.rubber(movePoint.x, movePoint.y, _this.ctx.lineWidth);
- }
- }
- mouseEnd(e){
- var _this = this;
- this.canvas.removeEventListener('touchmove', _this.mouseMove.bind(_this));
- this.canvas.removeEventListener('touchend', _this.mouseEnd.bind(_this));
- }
- // clip 裁剪模拟橡皮
- rubber(x, y, lw){
- console.log(lw);
- this.ctx.clearRect(x, y, lw+10, lw+10);
- }
- changeColor(sColor){
- this.ctx.strokeStyle = sColor;
- }
- changeSize(nSize){
- this.ctx.lineWidth = nSize;
- }
- clear(){
- this.ctx.clearRect(0, 0, this.canvasBox.width, this.canvasBox.height);
- }
- setDrawType(num){ // 1: 画 2: 橡皮
- this.drawType = num;
- }
- getDrawType(){
- return this.drawType;
- }
- }
橡皮的效果感觉不是太好, 找时间再看下有没有好办法.
来源: http://www.qdfuns.com/article/33133/898bec5c069225edc1b83e83f9da09c9.html