HTML5 Canvas 涂鸦墙

最新推荐文章于 2021-03-23 20:02:08 发布

BetterBOB

最新推荐文章于 2021-03-23 20:02:08 发布

阅读量2.1k

点赞数

文章标签： canvas

本文链接：https://blog.csdn.net/u012844719/article/details/23352973

版权

http://jsfiddle.net/46Gy4/

想要练习一下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编码的字符串。

BetterBOB

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas 涂鸦墙

http://jsfiddle.net/46Gy4/想要练习一下canvas，没事写个玩玩，可惜电脑上没装photoshop，要不然能更好看些。Insert title here#a { display: block; margin: 0 auto; border:3px solid; cursor:url('pencil.png'),a
复制链接

扫一扫