闲来无趣写了个网页版的画图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{padding:0;
margin:0;}
#mc{
display:block;
border:1px solid red;
box-shadow:0 0 10px yellow;
background:#fff;
margin-left:100px;
}
.left1 {
width:100px;
background:lightgreen;
height:600px;
position:absolute;
top:0;
left:0;
}
button {
width:80px;
text-align:center;
padding:5px 0;
margin:10px;
}
.colorPicker{
width:100px;
height:50px;
background-color:#000;
cursor:pointer;
}
.ylColor {
position:absolute;
z-index:99999;
width:250px;
background:#fff;
box-shadow:1px 1px 2px #c6d9f1, -1px -1px 2px #c6d9f1;
font-size:14px;
color:#000;
}
.ylColor .aCol {
display:inline-block;
float:left;
width:15px;
height:15px;
margin:0 7px 7px 0;
border:1px solid #eee;
cursor:pointer;
}
.ylColor .aCol:nth-child(10n) {
margin-right:0;
}
.ylColor-default {
padding:7px;
}
.ylColor-custom ul {
overflow:hidden;
padding:7px 7px 0;
}
.ylColor .title {
padding:7px;
background-color:#f4f4f8;
}
</style>
</head>
<body>
<div class="left1">
<button id="btn1">直线</button>
<button id="btn2">曲线</button>
<button id="btn3">实心矩形</button>
<button id="btn4">空心矩形</button>
<button id="btn5">实心圆</button>
<button id="btn6">空心圆</button>
<button id="btn7">清除画板</button>
<button id="btn8">橡皮</button>
<div class="colorPicker"></div>
</div>
<canvas id="mc" width="700" height="600"></canvas>
<script src="jquery.js"></script>
<script>
var btn = document.querySelectorAll('button');
var mc = document.getElementById('mc');
var ctx=mc.getContext('2d');
//点击事件，为不同的按钮绑定不同的事件
for(var i =0;i
btn[i].onclick =function () {
var id =this.getAttribute('id');
var a = $('.colorPicker').css('background-color');
console.log(a)
switch (id){
case 'btn1':
zhixian();
ctx.strokeStyle = a;
break;
case 'btn2':
xuxian();
ctx.strokeStyle = a;
break;
case 'btn3':
shixin();
ctx.fillStyle = a;
break;
case 'btn4':
kongxin();
ctx.strokeStyle = a;
break;
case 'btn5':
shiyuan();
ctx.fillStyle = a;
break;
case 'btn6':
kongyuan();
ctx.strokeStyle = a;
break;
case 'btn7':
qingchu();
break;
case 'btn8':
xiangpi();
break;
}
}
}
//直线
function zhixian(){
mc.onmousedown =function (ev) {
var e = ev || window.event;
var mx = e.offsetX;
var my = e.offsetY;
ctx.beginPath();
ctx.moveTo(mx,my);
mc.onmouseup =function (ev) {
var e = ev || window.event;
ctx.lineTo(e.offsetX,e.offsetY);
ctx.stroke();
}
}
}
//虚线
function xuxian(){
mc.onmousedown =function (ev) {
var e = ev || window.event;
ctx.beginPath();
ctx.moveTo(e.offsetX,e.offsetY);
mc.onmousemove =function (ev) {
var e = ev||window.event;
ctx.lineTo(e.offsetX,e.offsetY);
ctx.stroke();
}
mc.onmouseup =function(ev) {
var e = ev || window.event;
mc.onmousemove = mc.onmouseup =null;
// ctx.closePath();
}
}
}
//实心矩形
function shixin(){
mc.onmousedown =function (ev) {
console.log(1);
var e = ev|| window.event;
var x= e.offsetX;
var y = e.offsetY;
ctx.beginPath();
ctx.moveTo(x,y);
mc.onmouseup =function (ev) {
var e = ev||window.event;
var w = e.offsetX - x;
var h = e.offsetY - y;
ctx.rect(x,y,w,h);
ctx.fill();
mc.onmouseup =null;
}
}
}
//空心矩形
function kongxin(){
mc.onmousedown =function (ev) {
console.log(1);
var e = ev|| window.event;
var x= e.offsetX;
var y = e.offsetY;
ctx.beginPath();
ctx.moveTo(x,y);
mc.onmouseup =function (ev) {
var e = ev||window.event;
var w = e.offsetX - x;
var h = e.offsetY - y;
ctx.rect(x,y,w,h);
ctx.stroke();
mc.onmouseup =null;
}
}
}
//实心圆
function shiyuan(){
mc.onmousedown =function (ev) {
var e = ev||window.event;
var x = e.offsetX;
var y = e.offsetY;
ctx.beginPath();
// ctx.moveTo(x,y);
mc.onmouseup =function (ev) {
var e = ev || window.event;
var w = e.offsetX;
var h = e.offsetY;
var r = Math.sqrt(Math.pow(w-x,2)+Math.pow(h-y,2));
var d = r /2;
var x2 = (w - x) /2 + x;
var y2 = (h - y) /2 + y;
// console.log(r);
ctx.arc(x2,y2,d,0,Math.PI*2);
ctx.fill() ;
mc.onmouseup =null;
}
}
}
//空心圆
function kongyuan(){
mc.onmousedown =function (ev) {
var e = ev||window.event;
var x = e.offsetX;
var y = e.offsetY;
ctx.beginPath();
// ctx.moveTo(x,y);
mc.onmouseup =function (ev) {
var e = ev || window.event;
var w = e.offsetX;
var h = e.offsetY;
var r = Math.sqrt(Math.pow(w-x,2)+Math.pow(h-y,2));
var d = r /2;
var x2 = (w - x) /2 + x;
var y2 = (h - y) /2 + y;
// console.log(r);
ctx.arc(x2,y2,d,0,Math.PI*2);
ctx.stroke();
mc.onmouseup =null;
}
}
}
//清除画板
function qingchu(){
ctx.clearRect(0,0,700,600);
}
//橡皮
function xiangpi(){
mc.onmousedown =function (e) {
mc.onmousemove =function (e) {
ctx.clearRect(e.offsetX,e.offsetY,30,30);
}
}
mc.onmouseup =function (e) {
mc.onmousedown =null;
mc.onmousemove =null;
}
}
</script>
<script>
;(function($){
$.fn.ylColor =function(options){
var defaults = {
containerId:'ylColor',
left:50,
top:0,
defaultColor:'#000'
};
defaults.customColor = [
'#fff','#000','#eeece1','#1f497d','#4f81bd',
'#c0504d','#9bbb59','#8064a2','#4bacc6','#f79646',
'#f2f2f2','#808080','#ddd9c3','#c6d9f1','#dce6f2',
'#f2dcdb','#ebf1de','#e6e0ec','#dbeef4','#fdeada',
'#d9d9d9','#595959','#c4bd97','#8eb4e3','#b9cde5',
'#e6b9b8','#d7e4bd','#ccc1da','#b7dee8','#fcd5b5',
'#bfbfbf','#404040','#948a54','#558ed5','#95b3d7',
'#d99694','#c3d69b','#b3a2c7','#93cddd','#fac090',
'#a6a6a6','#262626','#4a452a','#17375e','#376092',
'#953735','#77933c','#604a7b','#31859c','#e46c0a',
'#7f7f7f','#0d0d0d','#1e1c11','#10243f','#254061',
'#632523','#4f6228','#403152','#215968','#984807'
];
defaults.formatColor = [
'#c00000','#ff0000','#ffc000','#ffff00','#92d050',
'#00b050','#00b0f0','#0070c0','#002060','#7030a0'
];
var settings = $.extend(defaults,options);
var elems =this;
var cur_elem;
var event =function(){
$(elems).each(function(){
$(this).click(function(){
show(this);
});
});
$('#' + settings.containerId).find('.aCol').click(function(){
onSelect(this);
});
};
var build =function(){
var containerId = settings.containerId;
var containerDiv = $('<div id="'+ containerId+'" class="ylColor" style="display: none"></div>');
var defaultDiv = $('<div class="ylColor-default"></div>');
var customDiv = $('<div class="ylColor-custom"></div>');
var formatDiv = $('<div class="ylColor-format"></div>');
defaultDiv.append('<span class="aCol" style="background-color: '+ settings.defaultColor +'" title="'+settings.defaultColor +'"></span>自动');
var liHtml ='';
$.each(settings.customColor,function(i,e){
liHtml +='<li class="aCol" data-color="'+e+'" style="background-color: '+ e +'" title="'+ e +'"></li>';
});
customDiv.append('<div class="title">主题颜色</div><ul>'+liHtml+'</ul>');
liHtml ='';
$.each(settings.formatColor,function(i,e){
liHtml +='<li class="aCol" data-color="'+e+'" style="background-color: '+e+'" title="'+ e +'"></li>';
});
customDiv.append('<div class="title">标准色</div><ul>'+liHtml+'</ul>');
if($('#' + containerId).length ==0){
//不存在，则创建
$('body').append(containerDiv);
}
containerDiv.append(defaultDiv,customDiv,formatDiv);
}
var show =function(elem){
cur_elem = elem;
var top = $(elem).offset().top;
var left = $(elem).offset().left;
$('#' + settings.containerId).css({
top: top + settings.top,
left: left + settings.left,
}).fadeIn();
};
var onSelect =function(selectOne){
$('#'+ settings.containerId).fadeOut();
if(options.onSelect){
options.onSelect(selectOne,cur_elem);
}
};
build();
event();
return this;
};
})(jQuery);
$('.colorPicker').ylColor({
left:220,
onSelect:function(oCol,elem){
var color = $(oCol).attr('data-color');
$('.colorPicker').css({'background-color':color});
}
});
</script>
</body>
</html>
此处的jquery需要自己从网上下，自己重新导入进去就可以
效果图
网友评论