regou28的博客

菜鸡一个,小白文章

HTML5-简易Canvas绘图板

除了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并不会有透明背景。

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34855517/article/details/78167374
文章标签: html5 canvas javascript
个人分类: JavaScript
上一篇从零开始的ubuntu mate下的学习笔记(1)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭