canvas简易画板。

时间：2017-06-30 00:03:57 阅读：170 评论：0 收藏：0 [点我收藏+]

标签：images 点击 can 需要移动 client 颜色 clientx idt

在学canvas的时候，想到可以做一个自己用来画画的简易画板，加上canvas的基础都已经学完，便尝试做了一个画板。如图

技术分享

1.获取标签.

    var c=document.getElementById(‘myCanvas‘);
    var ctx= c.getContext(‘2d‘);var b=document.getElementById(‘b‘);
    var b1=document.getElementById(‘b1‘);
    var bbb=document.getElementById(‘bbb‘);
    var col=document.getElementById(‘col‘);

c为canvas画板，ctx为定义canvas需要的属性，b为铅笔的粗细，b1为橡皮擦的大小，bbb为手动设置的铅笔大小，col为调色板。

2.设置画板组件

b.onmousedown=function(){
document.onmousemove=function(){
bbb.value=b.value;
}
}
b1.onmousedown=function(){
document.onmousemove=function(){
}
}

bbb.onblur=function(){
b.value=bbb.value;
}
bbb.onkeydown=function(e){
if(e.keyCode==13){
b.value=bbb.value;
}
}

这几个绑定事件都是给画板组件添加的事件，例如铅笔粗细，onkeydown为手动设置铅笔粗细时可直接点击回车键确定。

3.设置铅笔

pencil.onclick=function(){
c.onmousedown=function(e){
var e=e||event;
var x= e.clientX- c.offsetLeft;
var y= e.clientY- c.offsetTop;
ctx.beginPath();
ctx.moveTo(x,y);
document.onmousemove=function(e){

var e=e||event;
var x1= e.clientX- c.offsetLeft;
var y1= e.clientY- c.offsetTop;
ctx.strokeStyle=col.value;
ctx.lineTo(x1,y1);
ctx.lineWidth=b.value;
ctx.stroke();

};
};
}

要将画的画显示在页面上，首先需要到canvas的moveto和lineto属性，然后需要将两个属性的坐标分别绑定在onmousedown事件上和onmousemove事件上，一个为鼠标按下时获取的坐标，然后移动的时候用onmousemove获取到鼠标移动时的坐标，久可以将图显示在画布上。

4.设置橡皮擦

eraser.onclick=function(){
c.onmousedown=function(e){
var e=e||event;
var x= e.clientX- c.offsetLeft;
var y= e.clientY- c.offsetTop;
ctx.beginPath();
ctx.moveTo(x,y);
document.onmousemove=function(e){
var e=e||event;
var x1= e.clientX- c.offsetLeft;
var y1= e.clientY- c.offsetTop;
ctx.strokeStyle=‘gray‘;
ctx.lineTo(x1,y1);
ctx.lineWidth=b1.value;
ctx.stroke();

};
};
}

橡皮擦其实原理和铅笔一模一样，只是将颜色换为背景色即可。

5.取消绑定

window.onmouseup=function(){

document.onmousedown=null;
document.onmousemove=null;
}

在放开鼠标时，用onmouseup事件将绑定的事件移除（js取消绑定事件用null，jquery用unbind）

6,.将图片下载

var but=document.getElementById(‘but‘);

but.onclick=function(){
var str=load(c);
document.getElementById(‘hre‘).href=str;
}

function load(canvas){
var load=canvas.toDataURL("image/png");
return load;
}

todataurl是将绘制的图案转化为base64格式的编码。然后在将base64编码转化为图片，最后将base64放在a标签里的href里，即可以点击完成下载。

canvas简易画板。

标签：images 点击 can 需要移动 client 颜色 clientx idt

原文地址：http://www.cnblogs.com/zh23/p/7096433.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行