HTML5-简易Canvas绘图板

原创 2017年10月06日 21:58:02

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

使用HTML5的Canvas标签实现绘图板内拖拽元素

使用javascript的全局变量+(鼠标的移动、按住和放开的这3个事件)实现拖拽事件,利用Canvas进行绘图实现 画布内元素的拖拽。...

html5 canvas实现绘图板

  • 2017年05月12日 15:21
  • 7KB
  • 下载

Html5用Canvas制作绘图板

使用HTML5的Canvas制作简单的图形绘制器。思路整理,浏览破千或评论过百,即上源码分享。...

HTML5 Canvas实现圆形时钟简易教程

十分感谢segmentfault thewindsword的指引。文章传送门:点击打开链接 阅读本文需要一点关于canvas基本用法的基础,读者如需了解,可以通过w3c或其他网站先行简单学习它的教程...

html5之canvas实现模拟简易时钟

个人理解: moveTo 类似于提笔去另一个新地方 translate类似于把整张画布移位 如果画一条新路径不使用beginPath(),择stroke()会把之前画过的(即已经执行的stroke...
  • normol
  • normol
  • 2016年10月26日 20:17
  • 740

html5 canvas 实现简易马祖小游戏

参考妙趣课堂的视频,做了这个游戏,通过这个游戏可以了解到canvas的强大。废话不多说,直接上代码。 html代码: 马祖 css代码:这里我用的是less...

浅谈HTML5中的Canvas基本绘图API简易封装和使用(一)

HTML5的Canvas的功能可谓是非常强大,它可以做出很多炫酷的效果,从而更好的增加用户的体验。今天我们就来一起看下HTML5一些常用的API,个人根据实际的使用把它再次进行一次封装,使用起来感觉更...

基于 HTML5 Canvas 的简易 2D 3D 编辑器

要是我们有一个编辑器,能直接根据设计师的稿子,让非设计人员也非程序员来创建一个复杂的模型,那该多棒啊!今天我们就来看看这个看似复杂的过程是如何变成简单的!突然觉得危机感好强啊!!!...

Html5 Canvas初探学习笔记(11) -简易图片操作

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 本篇介绍简易的图片操作,首先是简易的图片...

Html5 canvas标签实现简易画图板

* { margin: 0; padding: 0; } .zt { width: 600px;...
  • yyf0409
  • yyf0409
  • 2017年07月29日 16:43
  • 205
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5-简易Canvas绘图板
举报原因:
原因补充:

(最多只允许输入30个字)