您的位置：首页 > Web前端 > HTML5

html5 canvas 微型绘图器

2015-10-09 22:28 543 查看

var canvas;
var context;

window.onload=function(){
//取得<canvas>和绘图上下文
canvas=document.getElementById("drawingCanvas");
context=canvas.getContext("2d");
//添加用于绘图操作的事件处理程序
canvas.onmousedown=startDrawing;
canvas.onmouseup=stopDrawing;
canvas.onmouseout=stopDrawing;
canvas.onmousemove=draw;
};

//记录此前为选择的颜色而被点击的img元素
var previousColorElement;

function changeColor(color,imgElement)
{
//重新设置当前绘图要使用的颜色
context.strokeStyle=color;
//为刚被点击的img元素应用一个新样式
imgElement.className="Selected";
//恢复上次被单机的img元素
if(previousColorElement!=null) previousColorElement.className="";
previousColorElement=imgElement;
}
//记录此前为选择的粗细而被单击过的img元素
var previousThicknessElement;
function changeThickness(thickness,imgElement)
{
//重新设置当前绘图要使用的粗细
context.lineWidth=thickness;
//为刚才点击过的img元素应用一个新样式
imgElement.className="Selected";
//恢复上次单击过的img元素
if(previousThicknessElement !=null) previousThicknessElement.className="";
previousThicknessElement=imgElement;
}

var isDrawing=false;

function startDrawing(e)
{
//开始绘图
isDrawing=true;

//创建新路径(使用当前设置好的描边颜色和线条粗细)
context.beginPath();

//把画笔放到鼠标当前所在的位置
context.moveTo(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);
}

function draw(e)
{
if(isDrawing==true)
{
//找到鼠标的位置
var x =e.pageX-canvas.offsetLeft;
var y=e.pageY-canvas.offsetTop;

//画一条到新位置的线
context.lineTo(x,y);
context.stroke();
}
}
function stopDrawing()
{
isDrawing=false;
}
function clearCanvas()
{
context.clearRect(0,0,canvas.width,canvas.height);
}

//保存图片
function saveCanvas()
{
//找到img元素
var imageCopy=document.getElementById("savedImageCopy");
//在图像中显示画布数据
imageCopy.src=canvas.toDataURL();
//显示包含img元素的div，以便把图像显示出来
var imageContainer=document.getElementById("savedCopyContainer");
imageContainer.style.display="block";
}

html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/print.css">
<script src="js/Paint.js"></script>

</head>
<body>
<div class="Toolbar">
- Pen Color -<br>
<img id="redPen" src="http://prosetech.com/html5/Chapter%2008/pen_red.gif" alt="Red Pen" onclick="changeColor('rgb(212,21,29)', this)">
<img id="greenPen" src="http://prosetech.com/html5/Chapter%2008/pen_green.gif" alt="Green Pen" onclick="changeColor('rgb(131,190,61)', this)">
<img id="bluePen" src="http://prosetech.com/html5/Chapter%2008/pen_blue.gif" alt="Blue Pen" onclick="changeColor('rgb(0,86,166)', this)">
</div>
<div class="Toolbar">
- Pen Thickness -<br>
<img src="http://prosetech.com/html5/Chapter%2008/pen_thin.gif" alt="Thin Pen" onclick="changeThickness(1, this)">
<img src="http://prosetech.com/html5/Chapter%2008/pen_medium.gif" alt="Medium Pen" onclick="changeThickness(5, this)">
<img src="http://prosetech.com/html5/Chapter%2008/pen_thick.gif" alt="Thick Pen" onclick="changeThickness(10, this)">
</div>
<div class="CanvasContainer">
<canvas id="drawingCanvas" width="500" height="300"></canvas>
</div>
<div class="Toolbar">
- Operations -<br>
<button onclick="saveCanvas()">Save the Canvas</button>
<button onclick="clearCanvas()">Clear the Canvas</button>
<div id="savedCopyContainer">
<img id="savedImageCopy"><br>
Right-click to save ...
</div>
</div>

</body>
</html>

body {
background: white;
}

.Toolbar {
float: left;
font-family: 'Trebuchet MS';
font-size: 14px;
font-variant: small-caps;
text-align: center;
background: #F2F7FE;
padding: 10px 15px 3px 10px;
margin-bottom: 1px;
margin-right: 1px;
border: 1px solid #7B899B;
}

.Toolbar button {
padding: 6px;
margin: 7px 2px;
font-variant: normal;
font-size: 12px;
}

.CanvasContainer {
clear: both;
}

canvas {
border: 1px solid #7B899B;
}

img {
padding: 2px;
border: 2px solid #F2F7FE;
}

img:hover {
border: 2px groove #E4F0FE;
background: white;
}

img.Selected {
border: 2px groove #E4F0FE;
}

#savedCopyContainer {
display: none;
}

#savedCopyContainer img {
width: 250px;
height: 150px;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 canvas

相关文章推荐

新的分享

章节导航