Here is the full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="D:\jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/iamphill/Bootstrap-Offcanvas/master/dist/css/bootstrap.offcanvas.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>oops2</title>
<link rel="stylesheet" href="style.css">
<style>
.navHeight {
height: 198px;
!important
}
html,
body {
width: 100%;
height: 100%;
}
#paint {
overflow: scroll;
width: 100%;
height: 100%;
!important
}
#sketch {
border: 10px dashed gray;
height: 100%;
position: relative;
}
#tmp_canvas {
position: absolute;
left: 0px;
right: 0;
bottom: 0;
top: 0;
cursor: crosshair;
width: 100%;
height: 100%;
!important
}
</style>
</head>
<body class="body-offcanvas" onload="init()">
<header class="clearfix">
<div class="row navigation-bar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle offcanvas-toggle" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas">
<span class="glyphicon glyphicon-plus"></span>
</button>
<nav class="navbar navbar-inverse navbar-fixed-bottom navbar-offcanvas navbar-offcanvas-touch navHeight" role="navigation" id="js-bootstrap-offcanvas">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>
<b style="color:grey;"> circle</b>
<br>
<button onclick="circle()" class="btn btn-primary">
<span class="glyphicon glyphicon-copyright-mark"></span>
</button>
</li>
<li><b style="color:grey;">rectangle</b>
<br>
<button onclick="rectangle()" class="btn btn-info">
<span class="glyphicon glyphicon-stop"></span>
</button>
</li>
<li><b style="color:grey;"> pencil</b>
<br>
<button onclick="pen()" class="btn btn-success">
<span class="glyphicon glyphicon-pencil"></span>
</button>
</li>
<li><b style="color:grey;"> save</b>
<br>
<button onclick="onSave()" class="btn btn-info">
<span class="glyphicon glyphicon-save"></span>
</button>
</li>
<li><b style="color:grey;"> clear</b>
<br>
<button id="clear" onclick="erase()" class="btn btn-warning">
<span class="glyphicon glyphicon-remove"></span>
</button>
</li>
</ul>
<label for="pencil" style="color:grey;">Pencil</label>
<input id="pencil" type="radio" name="tool" value="pencil" checked="checked">
<label for="eraser" style="color:grey;">Eraser</label>
<input id="eraser" type="radio" name="tool" value="eraser">
<br>
<br>
<h3 style="color:grey;">choose colours</h3>
<div id="blue" onclick="color(this)"></div>
<div id="orange" onclick="color(this)"></div>
<div id="black" onclick="color(this)"></div>
<div id="green" onclick="color(this)"></div>
<label style="color:grey;">select File <span class="glyphicon glyphicon-file"></span>:</label>
<input type="file" id="tmp_canvas" name="imageLoader" style="position:relative;top=3%;right:30%;" class="img-responsive" />
</div>
</div>
</nav>
</div>
</header>
<div id="sketch">
<canvas id="paint"></canvas>
</div>
<script>
var canvas, ctx, w, h;
var selectedcolor = "black";
var width, height;
canvas = document.querySelector('#paint');
ctx = canvas.getContext('2d');
var sketch = document.querySelector('#sketch');
var sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));
// Creating a tmp canvas
var tmp_canvas = document.createElement('canvas');
var tmp_ctx = tmp_canvas.getContext('2d');
tmp_canvas.id = 'tmp_canvas';
tmp_canvas.width = canvas.width;
tmp_canvas.height = canvas.height;
var mouse =
{
x : 0,
y : 0
}
;
var start_mouse =
{
x : 0,
y : 0
}
;
var last_mouse =
{
x : 0,
y : 0
}
;
var imageLoader = document.getElementById('tmp_canvas');
imageLoader.addEventListener('change', handleImage, false);
// load image
function handleImage(e)
{
var reader = new FileReader();
reader.onload = function (event)
{
var img = new Image();
img.onload = function ()
{
img.width = canvas.width;
img.height = canvas.height;
ctx.drawImage(img, 0, 0);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
// save image
function onSave()
{
var img = canvas.toDataURL("image/png");
document.write('<img src="' + img + '"/>');
}
function init()
{
canvas = document.getElementById('paint');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
}
// To select a color
function color(obj)
{
switch (obj.id)
{
case "blue" :
selectedcolor = "blue";
break;
case "orange" :
selectedcolor = "orange";
break;
case "black" :
selectedcolor = "black";
break;
case "green" :
selectedcolor = "green";
break;
}
}
function erase()
{
var m = confirm("Want to clear");
if (m)
{
ctx.clearRect(0, 0, w, h);
}
}
//这里是我要继承的矩形和圆形代码 函数形状（lineWidth，lineJoin，lineCap，strokeStyle，fillStyle）{ this.lineWidth = lineWidth; this.lineJoin = lineJoin; this.lineCap = lineCap; this.strokeStyle = strokeStyle; this.fillStyle = fillStyle; }
// rectangle
function rectangle()
{
sketch.appendChild(tmp_canvas);
/* Mouse Capturing Work */
tmp_canvas.addEventListener('mousemove', function (e)
{
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
}, false);
tmp_canvas.addEventListener('mousedown', function (e)
{
tmp_canvas.addEventListener('mousemove', onPaint1, false);
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
start_mouse.x = mouse.x;
start_mouse.y = mouse.y;
onPaint1();
}, false);
tmp_canvas.addEventListener('mouseup', function ()
{
tmp_canvas.removeEventListener('mousemove', onPaint1, false);
// Writing down to real canvas now
ctx.drawImage(tmp_canvas, 0, 0);
document.getElementById('clear').addEventListener('click', function ()
{
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.heigh);
}, false);
}, false);
var onPaint1 = function ()
{
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
var x = Math.min(mouse.x, start_mouse.x);
var y = Math.min(mouse.y, start_mouse.y);
var width = Math.abs(mouse.x - start_mouse.x);
var height = Math.abs(mouse.y - start_mouse.y);
tmp_ctx.strokeRect(x, y, width, height);
};
}
//我已添加的这行代码继承 rectangle.prototype = new shape（8，＆＃34; round＆＃34;，＆＃34; round＆＃34;，selectedcolor，selectedcolor）;
// circle
function circle()
{
sketch.appendChild(tmp_canvas);
/* Mouse Capturing Work */
tmp_canvas.addEventListener('mousemove', function (e)
{
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
}, false);
tmp_canvas.addEventListener('mousedown', function (e)
{
tmp_canvas.addEventListener('mousemove', onPaint, false);
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
start_mouse.x = mouse.x;
start_mouse.y = mouse.y;
onPaint();
}, false);
tmp_canvas.addEventListener('mouseup', function ()
{
tmp_canvas.removeEventListener('mousemove', onPaint, false);
// Writing down to real canvas now
ctx.drawImage(tmp_canvas, 0, 0);
document.getElementById('clear').addEventListener('click', function ()
{
tmp_ctx.arc(mouse.x, mouse.y, tmp_ctx.lineWidth / 2, 0, Math.PI * 2, ! 0);
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.heigh);
}, false);
}, false);
var onPaint = function ()
{
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
var x = (mouse.x + start_mouse.x) / 2;
var y = (mouse.y + start_mouse.y) / 2;
var radius = Math.max(Math.abs(mouse.x - start_mouse.x),
Math.abs(mouse.y - start_mouse.y)) / 2;
tmp_ctx.beginPath();
tmp_ctx.arc(x, y, radius, 0, Math.PI * 2, false);
tmp_ctx.stroke();
tmp_ctx.closePath();
};
}
circle.prototype= new shape(8, "round", "round",selectedcolor,selectedcolor);
(function ()
{
// Determine Tool
var tool = 'pencil';
document.querySelector('#pencil').onchange = function ()
{
if (this.checked)
tool = 'pencil';
// Show Tmp Canvas
tmp_canvas.style.display = 'block';
}
;
document.querySelector('#eraser').onchange = function ()
{
if (this.checked)
tool = 'eraser';
// Hide Tmp Canvas
tmp_canvas.style.display = 'none';
}
;
sketch.appendChild(tmp_canvas);
// Pencil Points
var ppts = [];
/* Mouse Capturing Work */
tmp_canvas.addEventListener('mousemove', function (e)
{
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
}
, false);
canvas.addEventListener('mousemove', function (e)
{
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
}
, false);
/* Drawing on Paint App */
tmp_ctx.lineWidth = 5;
tmp_ctx.lineJoin = 'round';
tmp_ctx.lineCap = 'round';
tmp_ctx.strokeStyle = selectedcolor;
tmp_ctx.fillStyle = selectedcolor;
tmp_canvas.addEventListener('mousedown', function (e)
{
tmp_canvas.addEventListener('mousemove', onPaint, false);
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
ppts.push(
{
x : mouse.x,
y : mouse.y
}
);
onPaint();
}
, false);
tmp_canvas.addEventListener('mouseup', function ()
{
tmp_canvas.removeEventListener('mousemove', onPaint, false);
ctx.globalCompositeOperation = 'source-over';
// Writing down to real canvas now
ctx.drawImage(tmp_canvas, 0, 0);
// Clearing tmp canvas
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
// Emptying up Pencil Points
ppts = [];
}
, false);
var onPaint = function ()
{
// Saving all the points in an array
ppts.push(
{
x : mouse.x,
y : mouse.y
}
);
if (ppts.length < 3)
{
var b = ppts[0];
tmp_ctx.beginPath();
// ctx.moveTo(b.x, b.y);
// ctx.lineTo(b.x + 50, b.y + 50);
tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth / 2, 0, Math.PI * 2, ! 0);
tmp_ctx.fill();
tmp_ctx.closePath();
return;
}
// Tmp canvas is always cleared up before drawing.
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
tmp_ctx.beginPath();
tmp_ctx.moveTo(ppts[0].x, ppts[0].y);
for (var i = 1; i < ppts.length - 2; i ++ )
{
var c = (ppts[i].x + ppts[i + 1].x) / 2;
var d = (ppts[i].y + ppts[i + 1].y) / 2;
tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
}
// For the last 2 points
tmp_ctx.quadraticCurveTo(
ppts[i].x,
ppts[i].y,
ppts[i + 1].x,
ppts[i + 1].y
);
tmp_ctx.stroke();
};
canvas.addEventListener('mousedown', function (e)
{
canvas.addEventListener('mousemove', onErase, false);
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
ppts.push(
{
x : mouse.x,
y : mouse.y
}
);
onErase();
}
, false);
canvas.addEventListener('mouseup', function ()
{
canvas.removeEventListener('mousemove', onErase, false);
// Emptying up Pencil Points
ppts = [];
}
, false);
var onErase = function ()
{
// Saving all the points in an array
ppts.push(
{
x : mouse.x,
y : mouse.y
}
);
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0,0,0,1)';
ctx.strokeStyle = 'rgba(0,0,0,1)';
ctx.lineWidth = 5;
if (ppts.length < 3)
{
var b = ppts[0];
ctx.beginPath();
ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, ! 0);
ctx.fill();
ctx.closePath();
return;
}
ctx.beginPath();
ctx.moveTo(ppts[0].x, ppts[0].y);
for (var i = 1; i < ppts.length - 2; i ++ )
{
var c = (ppts[i].x + ppts[i + 1].x) / 2;
var d = (ppts[i].y + ppts[i + 1].y) / 2;
ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
}
// For the last 2 points
ctx.quadraticCurveTo(
ppts[i].x,
ppts[i].y,
ppts[i + 1].x,
ppts[i + 1].y
);
ctx.stroke();
}
;
}
)();
// pen tool
function pen()
{
sketch.appendChild(tmp_canvas);
// Pencil Points
var ppts = [];
/* Mouse Capturing Work */
tmp_canvas.addEventListener('mousemove', function (e)
{
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
}
, false);
tmp_canvas.addEventListener('mousedown', function (e)
{
tmp_canvas.addEventListener('mousemove', onPaint, false);
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX;
mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY;
ppts.push(
{
x : mouse.x,
y : mouse.y
}
);
onPaint();
}
, false);
tmp_canvas.addEventListener('mouseup', function ()
{
tmp_canvas.removeEventListener('mousemove', onPaint, false);
// Writing down to real canvas now
ctx.drawImage(tmp_canvas, 0, 0);
// Clearing tmp canvas
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
// Emptying up Pencil Points
ppts = [];
}
, false);
var onPaint = function ()
{
// Saving all the points in an array
ppts.push(
{
x : mouse.x,
y : mouse.y
}
);
if (ppts.length < 3)
{
var b = ppts[0];
tmp_ctx.beginPath();
tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth / 2, 0, Math.PI * 2, ! 0);
tmp_ctx.fill();
tmp_ctx.closePath();
return;
}
// Tmp canvas is always cleared up before drawing.
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height);
tmp_ctx.beginPath();
tmp_ctx.moveTo(ppts[0].x, ppts[0].y);
for (var i = 1; i < ppts.length - 2; i ++ )
{
var c = (ppts[i].x + ppts[i + 1].x) / 2;
var d = (ppts[i].y + ppts[i + 1].y) / 2;
tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d);
}
// For the last 2 points
tmp_ctx.quadraticCurveTo(
ppts[i].x,
ppts[i].y,
ppts[i + 1].x,
ppts[i + 1].y
);
tmp_ctx.stroke();
};
}
pen.prototype=new shape(8,"round","round",selectedcolor,selectedcolor);
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/iamphill/Bootstrap-Offcanvas/master/dist/js/bootstrap.offcanvas.min.js"></script>
</body>
</html>
答案 0 :(得分：-2)
function shape(lineWidth , lineJoin , lineCap , strokeStyle ,fillStyle ) {
this.lineWidth = lineWidth ;
this.lineJoin = lineJoin ;
this.lineCap = lineCap ;
this.strokeStyle = strokeStyle ;
this.fillStyle = fillStyle ;
}
这些被称为js prototypes.You可以将它们用作 - ＆gt;
var circle= new shape("5", "round", "round",selectedcolor,selectedcolor);
var rectangle= new shape("8", "round", "round",selectedcolor,selectedcolor);
然后你可以访问你想要的任何属性circle.lineWidth等等