1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style>
  7.             body{
  8.                 background: white;
  9.             }
  10.             .ToolBar{
  11.                 float: left;
  12.                 font-family: "微软雅黑";
  13.                 font-size: 14px;
  14.                 font-variant: small-caps;
  15.                 text-align: center;
  16.                 background: #F2F7EE;
  17.                 padding: 10px 15px 3px 10px;
  18.                 margin-bottom: 1px;
  19.                 margin-right: 1px;
  20.                 border: 1px solid #7B899B;
  21.             }
  22.             .ToolBar button{
  23.                 padding: 6px;
  24.                 margin: 7px 2px;
  25.                 font-variant: normal;
  26.                 font-size: 12px;
  27.             }
  28.             canvas{
  29.                 border: 1px solid #7B899B;
  30.             }
  31.             img{
  32.                 padding: 2px;
  33.                 border: 2px solid #F2F7EE;
  34.             }
  35.             img:hover{/*当鼠标悬停在图片上*/
  36.                 border: 2px groove #E4F0FE;
  37.                 background: white;
  38.             }
  39.             img.Selected{
  40.                 border: 2px groove #E4F0FE;
  41.             }
  42.             #saveCopyContainer{
  43.                 display: none;
  44.             }
  45.             #saveCopyContainer img{
  46.                 width: 250px;
  47.                 height: 150px;
  48.             }
  49.             .CanvasContainer{
  50.             }
  51.         </style>
  52.         <script type="text/javascript">
  53.             var canvas;
  54.             var context;
  55.             var isDrawing=false;
  56.             window.onload=function(){
  57.                 canvas = document.getElementById("drawingCanvas");
  58.                 context = canvas.getContext("2d");
  59.                 canvas.onmousedown = startDrawing;
  60.                 canvas.onmouseup = stopDrawing;
  61.                 canvas.onmouseout = stopDrawing;
  62.                 canvas.onmousemove = draw;
  63.             }
  64.             function startDrawing(e)
  65.             {
  66.                 isDrawing = true;
  67.                 context.beginPath();
  68.                 context.moveTo(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);
  69.             }
  70.             function stopDrawing()
  71.             {
  72.                 isDrawing=false;
  73.             }
  74.             function draw(e)
  75.             {
  76.                 if(isDrawing)
  77.                 {
  78.                     var x = e.pageX-canvas.offsetLeft;
  79.                     var y = e.pageY-canvas.offsetTop;
  80.                     context.lineTo(x,y);
  81.                     context.stroke();
  82.                 }
  83.             }
  84.             function changeColor(color,imgEle)
  85.             {
  86.                 context.strokeStyle = color;
  87.                 imgEle.className = "Selected";
  88.             }
  89.             function changethickness(thickness,imgEle)
  90.             {
  91.                 context.lineWidth = thickness;
  92.                 imgEle.className = "Selected";
  93.             }
  94.             function clearCanvas(){
  95.                 context.clearRect(0,0,canvas.width,canvas.height)
  96.             }
  97.             function saveCanvas(){
  98.                 var imageCopy = document.getElementById("saveImageCopy");
  99.                 imageCopy.src = canvas.toDataURL();
  100.                 var imageContainer = document.getElementById("saveCopyContainer");
  101.                 imageContainer.style.display = "block";
  102.             }
  103.         </script>
  104.     </head>
  105.     <body>
  106.         <div class="Toolbar">
  107.             <img id="redPen" src="img/pen_red.gif" alt="Red Pen"
  108.                 onclick="changeColor('rgb(212,21,29)',this)"/>
  109.             <img id="greenPen" src="img/pen_green.gif" alt="Green Pen"
  110.                 onclick="changeColor('rgb(131,190,61)',this)"/>
  111.             <img id="bluePen" src="img/pen_blue.gif" alt="Blue Pen"
  112.                 onclick="changeColor('rgb(0,86,166)',this)"/>
  113.         </div>
  114.         <div class="Toolbar">
  115.             <img src="img/pen_thin.gif" alt="Thin Pen"
  116.                 onclick="changethickness(1,this)"/>
  117.             <img src="img/pen_medium.gif" alt="Medium Pen"
  118.                 onclick="changethickness(5,this)"/>
  119.             <img src="img/pen_thick.gif" alt="Thick Pen"
  120.             onclick="changethickness(10,this)"/>
  121.         </div>
  122.         <div>
  123.             <canvas id="drawingCanvas" width="500" height="500"></canvas>
  124.         </div>
  125.         <div>
  126.             <button onclick="saveCanvas()">Save</button>
  127.             <button onclick="clearCanvas()">Clean</button>
  128.             <div id="saveCopyContainer">
  129.                 <img id="saveImageCopy"/><br/>
  130.             </div>
  131.         </div>
  132.     </body>
  133. </html>

素材：

HTML5入门十---Canvas画布实现画图（一）的更多相关文章

  1. HTML5入门十一---Canvas画布实现画图（二）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. HTML5入门九---Canvas画布

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  4. HTML5 中的 canvas 画布（二）

    绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image();  // 先创建图片对象 image.src = '图片的 ...

  5. canvas画布如何画图案例

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  7. 自学HTML5第四节（canvas画布详解）

    canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 Ja ...

  8. “canvas画布仿window系统自带画图软件"项目的思考

    "canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...

  9. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. 亚马逊左侧导航（jquery.menuaim.js）

    jquery.menuaim.js     主菜单 <div class="active"> <ul class="dropdown-menu" ...

  2. 如何去掉html中的超链接

    $a= preg_replace("/<a[^>]+>/", "", $a); $a= preg_replace("/<\/a ...

  3. svn 清空

    SVN是目前用得比较多的而且很方便的版本管理体系. 在开发过程中遇到了这样的问题: 有时我们需要一个干净的code版本,没有 .svn 这些文件夹记录的版本传到服务器上使用. 这个时候自己一个个去删除 ...

  4. （一）使用log4net生成日志文件

    1.引入log4net.dll 1.1 Nuget安装 或 http://logging.apache.org/log4net/下载log4net的源代码,编译后把log4net.dll引入项目. 2 ...

  5. GIS论文翻译问题

    1 在sci库中输入关键词，搜索一篇相关的英文。看看专业词汇怎么翻译。做个记录 2打开ArcGIS中文online和英文online帮助文档。在中文帮助中搜索中文。找到相应的位置，再切换到英文的版本中 ...

  6. 初涉Node.js

    Node.js的是建立在Chrome的JavaScript的运行时,可方便地构建快速,可扩展的网络应用程序的平台. Node.js使用事件驱动.非阻塞I/ O模型,是轻量级.高效.完美的跨分布式设备运 ...

  7. 例题-Quota 实作：

    假设这五个用户均需要进行磁盘配额限制,每个用户的配额为 2GB (hard) 以及 1.8GB (soft),该如何处理? 答: 这一题实作比较难,因为必须要包括文件系统的支持.quota 数据文件建 ...

  8. 【转】android 内存泄漏相关收藏博客。

    关于android内存泄漏的研究   博客建了几个月,都没有去写,一是因为当时换工作,然后又是新入职(你懂的,好好表现),比较忙:二是也因为自己没有写博客的习惯了.现在还算是比较稳定了,加上这个迭代基 ...

  9. SQL获取数据库名，表名，列名，说明等信息

    由于最近工作涉及SQL语句较多,对一些不常见的SQL函数.及存储过程下面进行整理和描述,供大家分享: /************************************************ ...

  10. smarty中的母板极制_extends和block标签

    模板继承 继承是从面向对象编程而来的概念,模板继承可以让你定义一个或多个父模板,提供给子模板来进行扩展. 扩展继承意味着子模板可以覆盖部分或全部父模板的块区域. 继承结构可以是多层次的,所以你可以继承 ...