这是一个使用JavaScript和HTML5 canvas元素实现的涂鸦板示例。用户可以选择不同的画笔颜色和宽度，以及使用橡皮擦进行绘图操作。此外，还提供了清除画布、撤销和导出图片路径的功能。
<!doctype html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>javascript canvas画图实例</title>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
*{margin:0;padding:0;}
.fa{width:740px;margin:0 auto;}
.top{margin:20px 0;}
.top input{width:25px;height:25px;border:1px solid #fff;border-radius:4px;background:#ddd;}
.top .i1{background:#000000;}
.top .i2{background:#FF0000;}
.top .i3{background:#80FF00;}
.top .i4{background:#00FFFF;}
.top .i5{background:#808080;}
.top .i6{background:#FF8000;}
.top .i7{background:#408080;}
.top .i8{background:#8000FF;}
.top .i9{background:#CCCC00;}
#canvas{background:#eee;cursor:default;}
.font input{font-size:14px;}
.top .grea{background:#aaa;}
</style>
</head>
<body>
<div class="fa">
<div class="top">
<div id="color">
请选择画笔颜色：
<input class="i1" type="button" value="" />
<input class="i2" type="button" value="" />
<input class="i3" type="button" value="" />
<input class="i4" type="button" value="" />
<input class="i5" type="button" value="" />
<input class="i6" type="button" value="" />
<input class="i7" type="button" value="" />
<input class="i8" type="button" value="" />
<input class="i9" type="button" value="" />
</div>
<div class="font" id="font">
请选择画笔的宽度：
<input type="button" value="细" />
<input type="button" value="中" class="grea"/>
<input type="button" value="粗" />
</div>
<div>
<span id="error">如果有错误，请使用橡皮擦：</span>
&
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>javascript canvas画图实例</title>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
*{margin:0;padding:0;}
.fa{width:740px;margin:0 auto;}
.top{margin:20px 0;}
.top input{width:25px;height:25px;border:1px solid #fff;border-radius:4px;background:#ddd;}
.top .i1{background:#000000;}
.top .i2{background:#FF0000;}
.top .i3{background:#80FF00;}
.top .i4{background:#00FFFF;}
.top .i5{background:#808080;}
.top .i6{background:#FF8000;}
.top .i7{background:#408080;}
.top .i8{background:#8000FF;}
.top .i9{background:#CCCC00;}
#canvas{background:#eee;cursor:default;}
.font input{font-size:14px;}
.top .grea{background:#aaa;}
</style>
</head>
<body>
<div class="fa">
<div class="top">
<div id="color">
请选择画笔颜色：
<input class="i1" type="button" value="" />
<input class="i2" type="button" value="" />
<input class="i3" type="button" value="" />
<input class="i4" type="button" value="" />
<input class="i5" type="button" value="" />
<input class="i6" type="button" value="" />
<input class="i7" type="button" value="" />
<input class="i8" type="button" value="" />
<input class="i9" type="button" value="" />
</div>
<div class="font" id="font">
请选择画笔的宽度：
<input type="button" value="细" />
<input type="button" value="中" class="grea"/>
<input type="button" value="粗" />
</div>
<div>
<span id="error">如果有错误，请使用橡皮擦：</span>
&
最低0.47元/天 解锁文章
5075
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
