<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>畫板</title>
<style>
*{padding: 0;margin: 0;}
html {
overflow: hidden;
}
a{
text-decoration: none;
width: 25px;
height: 25px;
}
#box{
background-color: #242424;
}
.toolMenu{
position: absolute;
color: white;
}
.openButton,.download{
width: 25px;
height: 25px;
background-color: greenyellow;
border-radius: 50%;
margin: 5px;
color: red;
text-align: center;
line-height: 25px;
cursor: pointer;
}
.tool,.eraser{
padding: 5px;
margin: 5px;
border:2px solid greenyellow;
display: none;
}
</style>
</head>
<body>
<div class="toolMenu">
<div class="openButton">刷</div>
<ul class="tool">
<li>寬度:<input class="widthInput" type="range"/></li>
<li>顏色:<input type="color"/></li>
<li><button>橡皮擦</button></li>
</ul>
<ul class="tool eraser">
<li>寬度:<input class="eraserInput" type="range"/></li>
</ul>
<div class="openButton clearButton">清</div>
<a href="" class="download"><div class="download">存</div></a>
</div>
<canvas id="box"></canvas>
<script src="js/painer.js"></script>
<script src="js/main.js"></script>
</body>
<html></html>/**
* Created by Administrator on 2017/8/10.
* js/painer.js
*/
(function () {
function Painter(id) {
var canvasEle = document.getElementById(id);
canvasEle.width = innerWidth;
canvasEle.height = innerHeight;
this.context = canvasEle.getContext("2d");
//畫筆漸變色
var linearGradient = this.context.createLinearGradient(0,0,innerWidth,innerHeight);
linearGradient.addColorStop(0,"#1EEB9F");
linearGradient.addColorStop(0.5,"#FFFFFF");
linearGradient.addColorStop(1,"#26B9EB");
this.context.strokeStyle = linearGradient;
this.drawLine();
}
Painter.prototype.drawLine = function () {
var self = this;
//監聽鼠標按下擡起
this.context.canvas.addEventListener("mousedown",startAction);
this.context.canvas.addEventListener("mouseup",endAction);
//封裝鼠標按下函數
function startAction(event) {
//如果沒有使用橡皮擦就畫線
if(!self.isClear){
//開始新的路徑
self.context.beginPath();
self.context.moveTo(event.pageX,event.pageY);
self.context.stroke();
}
//監聽鼠標移動
self.context.canvas.addEventListener("mousemove",moveAction);
}
//封裝鼠標擡起函數
function endAction() {
//不再使用橡皮擦
self.isClear=false;
//移除鼠標移動事件
self.context.canvas.removeEventListener("mousemove",moveAction);
}
//封裝鼠標移動函數
function moveAction(event) {
//判斷是否啓動橡皮擦功能
if(self.isClear){
self.context.clearRect(event.pageX-8,event.pageY-8,16,16);
return;
}
self.context.lineTo(event.pageX,event.pageY);
self.context.stroke();
}
};
//封裝畫筆寬度
Painter.prototype.setLineWidth = function (width) {
this.context.lineWidth = width;
};
//封裝設置畫筆樣式
Painter.prototype.isRoundLineCap = function (isRound) {
this.context.lineCap = isRound?"round":"butt";
};
//封裝畫筆顏色
Painter.prototype.setLineColor = function (color) {
this.context.strokeStyle = color;
};
//封裝畫布內容轉換
Painter.prototype.save=function(){
return this.context.canvas.toDataURL();
};
//封裝橡皮擦
Painter.prototype.eraser=function(){
this.isClear=true;
}
//封裝清屏
Painter.prototype.clearCls=function(){
this.context.clearRect(0,0,innerWidth,innerHeight)
};
//Painter定義到window上
window.Painter = Painter;
})();/**
* Created by Administrator on 2017/8/10.
* js/main.js
*/
(function () {
function init() {
var panter = new Painter("box");
panter.setLineWidth(5);
panter.isRoundLineCap(true);
//panter.setLineColor("#242424");
var toolView = document.querySelector(".tool");
document.querySelector(".openButton").onclick = function () {
toolView.style.display = toolView.style.display === "block"?"none":"block";
};
document.querySelector("input[type=range]").value = panter.context.lineWidth*2;
//input的range綁定到畫筆寬度
document.querySelector("input[type=range]").onchange = function () {
panter.setLineWidth(this.value/2);
};
//獲取color顏色綁定到畫筆
document.querySelector("input[type=color]").onchange = function () {
panter.setLineColor(this.value);
};
//清屏
document.querySelector('.clearButton').onclick = function() {
panter.clearCls();
}
//橡皮擦
document.querySelector('.tool button').onclick=function(){
panter.eraser();
}
//下載畫布內容
document.querySelector(".download").onclick=function(){
var a=panter.save();
console.log(1);
this.href=a;
}
}
init();
})();局部效果圖：
點擊清屏 全屏清除
點擊保存可下載
