关闭

HTML5-简易Canvas绘图板

标签: html5canvasjavascript
55人阅读 评论(0) 收藏 举报
分类:

除了canvas以外,还用了一丢丢meta清除页面缓存,color类型和range类型的input控件。其他基本就一些鼠标响应事件了。总之就一个十分简易的canvas绘图板。贴个源码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
<meta http-equiv="expires" content="0">
<title>canvas绘图板</title>
<style>
canvas{
    border:1px dashed black;}
</style>
<script type="text/javascript">
var canvas;
var context;
window.onload=function(){
    canvas=document.getElementById("drawingCanvas");
    context=canvas.getContext("2d");
    context.fillStyle="rgb(255,255,255)";
    context.fillRect(0,0,canvas.width,canvas.height);
    context.strokeStyle="rgb(0,0,0)";
    context.lineWidth=5;
    canvas.onmousedown=startDrawing;
    canvas.onmouseup=stopDrawing;
    canvas.onmouseout=stopDrawing;
    canvas.onmousemove=draw;
    };
var previousColorElement;
function changeColor(color,imgElement){
    context.strokeStyle=color;
    imgElement.className="Selected";
    if(previousColorElement!=null){
        previousColoeElement.className="";
        }
        previousColorElement=imgElement;
    }
var previousThicknessElement;
function changeThickness(thickness,imgElement){
    context.lineWidth=thickness;
    imgElement.className="Selected";
    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.fillStyle="rgb(255,255,255)";
    context.fillRect(0,0,canvas.width,canvas.height);
    }
</script>
</head>
<body>
<div align="center">
COLOR<input type="color" id="colorSelect" onchange="changeColor(colorSelect.value,this);" value="rgb(255,255,255)"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
WIDTH<input type="range" id="widthSelect" onchange="context.lineWidth=widthSelect.value;" min="1" max="20"/ value="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button id="clearCanvas" onclick="clearCanvas();">CLEAR ALL</button>
<br />
<canvas id="drawingCanvas" width="800" height="400"></canvas>
</div>
</body>
</html>

大概这个鬼样子。
canvas绘图板界面
火狐之类的浏览器可以直接右键保存绘制的图像为*.png不过我想的是用填充白色就不用写橡皮擦了所以整个画布都是填充了白色,存的*.png并不会有透明背景。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:84次
    • 积分:20
    • 等级:
    • 排名:千里之外
    • 原创:0篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档