想要练习一下canvas,没事写个玩玩,可惜电脑上没装photoshop,要不然能更好看些。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#a {
display: block;
margin: 0 auto;
border:3px solid;
cursor:url('pencil.png'),auto;
}
h1 {
text-align:center;
}
.operation {
margin: 0 auto;
width: 400px;
height: 100px;
}
.operation ul {
list-style:none;
}
ul li {
margin-top: 6px;
}
li.range {
padding-left: 44px;
}
li.color {
padding-left: 97px;
}
#rangeValue {
vertical-align: super;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="content">
<h1>Canvas 涂鸦墙</h1>
<div class="operation">
<ul>
<li>
<label>画笔样式</label>
<select id="type">
<option value="arc">圆形笔刷</option>
<option value="rect">矩形笔刷</option>
</select>
</li>
<li class="range">
<label>画笔大小</label>
<input id="rangeInput" type="range" min="1" max="50" value="25">
<span id="rangeValue">25</span>
</li>
<li class="color">
<label>画笔颜色</label>
<input id="colorInput" type="color">
</li>
</ul>
</div>
<canvas id="a" width="600px" height="600px"></canvas>
<button id="translate">Translate</button>
<img id="canvasImg">
</div>
<script>
var ctx;
var x;
var y;
var a;
var dragFlag = false;
var rangeInput,colorInput,type;
function circle(x,y,r,color) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
}
function drawRect(x,y,w,h,color) {
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
}
function init() {
var canvas = document.getElementById("a");
rangeInput = document.getElementById("rangeInput");
colorInput = document.getElementById("colorInput");
type = document.getElementById("type");
rangeInput.addEventListener("change",changeRange);
ctx = canvas.getContext("2d");
document.getElementById("translate").addEventListener("click",translate);
canvas.addEventListener("mousemove",mouseMove);
canvas.addEventListener("mousedown",mousedown);
canvas.addEventListener("mouseup",mouseup);
//a = setInterval(draw, 10);
}
function translate(e){
document.getElementById("canvasImg").src = ctx.canvas.toDataURL();
}
function changeRange(e){
var range = e.currentTarget.value;
document.getElementById("rangeValue").innerHTML = range;
}
function draw(){
//circle(x,y,10);
}
function mousedown(){
dragFlag = true;
}
function mouseup(){
dragFlag = false;
}
function mouseMove (e){
var rect = e.currentTarget.getBoundingClientRect();
var gravityPoint = {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
x = gravityPoint.x;
y = gravityPoint.y;
if (dragFlag) {
if (type.value == "arc") {
circle(x,y+40,rangeInput.value,colorInput.value);
} else {
drawRect(x,y,rangeInput.value,rangeInput.value,colorInput.value)
}
}
}
init();
</script>
</body>
</html>
总结:
- 用原生JS实现drag效果,需要3个事件,mousemove,mousedown,mouseup,当mousedown为true时才执行mousemove,当触发mouseup时停止。
- 变换鼠标的样式,cursor:url(‘aa.png’),auto;
- 将canvas转换成image:canvas.toDataURL(),得到是base64编码的字符串。