html5 canvas 微型绘图器

来源：互联网发布：世界云计算排名编辑：程序博客网时间：2024/04/30 03:31

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;}

0 0