刚刚在博客园落户了，希望能在这认识更多大神，希望能和大家交好朋友。

闲来无事，把以前用canvas写的画板代码改进了一番，用Html5提供的表单标签给其 加了一个选择颜色的功能，因此发现了该标签的一个bug！！！当颜色为黑色的时候，不能选择初定义颜色以外的颜色，解决的办法是，先选择其他的定义颜色，再在右边的自定义区选择颜色即可。

游戏地址：https://xiamuqing.github.io/canvaspalette/

每个人都有一个画家梦，废话不多说了，上代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="utf-8">

     <title></title>

     <style>

         body {

             text-align: center;

         }

         canvas {

             border: 1px dashed green;

         }

         #cvs1{

             border:none;

         }

     </style>

 </head>

 <body>

 <canvas id="cvs" width="800" height="600"></canvas>

 <canvas id="cvs1" width="200" height="150"></canvas>

 <button id="clear">清除</button>

 <input type="color" id="changecolor">

 <!--<button id="btn1">蓝色</button>

 <button id="btn2">绿色</button>

 <button id="btn3">黄色</button>-->

 <!--设置画笔粗细-->

 <select name="" id="panWidth">

     <option value="1">1px</option>

     <option value="10">10px</option>

     <option value="30">30px</option>

 </select>

 <script>

     var cvs = document.getElementById("cvs");

     var context = cvs.getContext('2d');

     var points = [];

     var cvs1 = document.getElementById("cvs1");

     var context1 = cvs1.getContext('2d');

     /*太阳(放射性渐变)*/

     context.beginPath();

     var grandianR=context.createRadialGradient(30,30,10,50,50,150);

     grandianR.addColorStop(0,"#fff");

     grandianR.addColorStop(1,"yellow");

     context.fillStyle=grandianR;

     context.arc(80,80,60,0,2*Math.PI);

     context.fill();

     /*文字*/

     context.save();

     context.beginPath();

     //文字线性渐变

     var grandient=context.createLinearGradient(250,200,600,50);

     grandient.addColorStop(0,"red");

     grandient.addColorStop(0.2,"orange");

     grandient.addColorStop(0.4,"yellow");

     grandient.addColorStop(0.6,"green");

     grandient.addColorStop(0.7,"#50C0EE");

     grandient.addColorStop(0.8,"blue");

     grandient.addColorStop(1,"purple");

     context.fillStyle=grandient;

     context.font="50px 方正喵呜体";

     //文字阴影

     context.shadowBlur=1;

     context.shadowOffsetX=2;

     context.shadowOffsetY=1;

     context.shadowColor ="#000";

     context.fillText("百折不挠小青青",250,80);

     context.restore();

     context.beginPath();

     var agle=0;

     context1.save();

     context1.translate(cvs1.width-100,cvs1.height-80);

     setInterval(function () {  //定时器导致84行小画布不会出现在大画布里头

         context1.clearRect(-200,-100,200,100);

         context1.rotate(agle);

         context1.strokeRect(0,0,50,50);

         agle+=0.01;

     },30)

     context1.stroke();

       //  context.drawImage(cvs1,0,0,100,100);

     var mouseDown = false;

     //给画布注册鼠标按下事件

     cvs.addEventListener("mousedown", function (e) {

         mouseDown = true;

         points.push({x: e.offsetX, y: e.offsetY});

     })

     cvs.addEventListener("mouseup", function () {

         mouseDown = false;

         points = [];

     })

     cvs.addEventListener("mousemove", function (e) {

         if (mouseDown) {

             context.beginPath();

             //获取鼠标在画布的位置

             var x = e.offsetX;

             var y = e.offsetY;

             //将坐标存入数组里，再通过循环连接起来

             points.push({x: x, y: y});

             context.moveTo(points[0].x, points[0].y);

             for (var i = 1; i < points.length; i++) {

                 context.lineTo(points[i].x, points[i].y);

             }

             context.stroke();

         }

     })

     var clear = document.getElementById("clear");

     clear.onclick = function () {

         context.clearRect(0,0,cvs.width,cvs.height);

     }

     //通过调色板给画笔改变颜色

     var changecolor=document.getElementById("changecolor");

     changecolor.onchange=function () {

         context.strokeStyle=this.value;

      //   console.log(this.value);

     }

 //    var btn1 = document.getElementById("btn1");

 //    var btn2 = document.getElementById("btn2");

 //    var btn3 = document.getElementById("btn3");

 //    btn1.onclick = function () {

 //        context.strokeStyle = "blue";

 //    }

 //    btn2.onclick = function () {

 //        context.strokeStyle = "green";

 //    }

 //    btn3.onclick = function () {

 //        context.strokeStyle = "yellow";

 //    }

     var panWidth=document.getElementById("panWidth");

     panWidth.onchange=function () {

       //  console.log(this.value);

         context.lineWidth=this.value;

     }

 </script>

 </body>

 </html>

下面是我画的一幅画= =

canvas实现画板功能（渐变、动画、阴影...）的更多相关文章

  1. 【分享】用Canvas实现画板功能

    前言 PC端测试:QQ浏览器全屏绘画完成.缩小时内容会被清空,切换背景颜色内容会被重置,其他暂无发现: 手机端测试:微信内置浏览器不通过:Safari 浏览器使用画笔时没固定页面会有抖动效果,使用橡皮 ...

  2. Canvas现实画板功能

    先看图片 HTML <!doctype html> <html lang="en"> <head> <meta charset=" ...

  3. 一款基于HTML5 Canvas的画板涂鸦动画

    今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...

  4. 谈谈一些有趣的CSS题目（十三）-- 巧妙地制作背景色渐变动画！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. canvas实现画板

    canvas实现画板 主要用到知识点: 鼠标事件onmousedown() onmousemove() onmouseup() onmouseleave() 事件委托 canvas的一些方法 如:绘制 ...

  6. 创建CSS3警示框渐变动画

    来源:GBin1.com 在线演示   在线下载 现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的.由于默认的JavaScript警示框往往设计不佳和过 ...

  7. iOS个人中心渐变动画、微信对话框、标签选择器、自定义导航栏、短信验证输入框等源码

    iOS精选源码 简单的个人中心页面-自定义导航栏并予以渐变动画 程序员取悦女票的正确姿势---Tip1(iOS美容篇) iOS 前台重启应用和清除角标的问题 微信原生提醒对话框3.0 JHLikeBu ...

  8. canvas小画板--（1）平滑曲线

    功能需求 项目需求:需要实现一个可以自由书写的小画板 简单实现 对于熟悉canvas的同学来说,这个需求很简单,短短几十行代码就能实现: <!doctype html> <html& ...

  9. canvas小画板——（2）荧光笔效果

    我们在上一篇文章中讲了如何绘制平滑曲线 canvas小画板——(1)平滑曲线. 透明度实现荧光笔 现在我们需要加另外一种画笔效果,带透明度的荧光笔.那可能会觉得绘制画笔的时候加上透明度就可以了.我们来 ...

随机推荐

  1. Bootstrap导航悬浮顶部,stickUp

    stickUp 一个 jQuery 插件 这是一个简单的jQuery插件,它能让页面目标元素 “固定” 在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置.此插件可以在多页面的网站上工 ...

  2. Hadoop集成

    Hadoop集成   长期以来,我每开个系列,只有兴趣写一篇,很难持之与恒.为了克服这个长久以来的性格弱点,以及梳理工作半年的积累.最近一个月会写两篇关于Mongo在地理大数据方面的实践和应用,一篇关 ...

  3. noip模拟赛：电话时间[字符串]

    [问题描述] 某人总是花很多时间给父母打电话.有一次他记录了打电话的开始时间和结束时刻t1和t2,请你帮他算算此次通话一共用了多少秒.又有一次,他记录了打电话的开始时刻t1和通话的时间长度len,请你 ...

  4. Nginx+phpfastcgi下flush输出问题

    最近由于业务需要,需要使用php的flush输出缓存刷新,处理浏览器超时问题. 最初的测试代码如下: ob_start();//打开缓冲区 for ($i=10; $i>0; $i--) { e ...

  5. [转]SVN操作手册

    [转]SVN操作手册 2012-04-28 11:26 by NewSea, 2495 阅读, 0 评论, 收藏, 编辑 原文: http://hi.baidu.com/caiqiupeng/blog ...

  6. 为什么选择MongoDB?

    为什么选择MongoDB? 阅读目录 开始 为啥用MongoDB? 原来的架构 新需求 如何解决? 新思路 选型条件 一些候选者 最初的选择 代价 新的候选者 重新选择 胆子大一点 胆子再大一点 胆子 ...

  7. SQL Server跨网段（跨机房）FTP复制

    SQL Server跨网段(跨机房)FTP复制 2013-09-24 17:53 by 听风吹雨, 273 阅读, 0 评论, 收藏, 编辑 一. 背景 搭建SQL Server复制的时候,如果网络环 ...

  8. xcode5向APP store上传应用的时候注意点

    最近我在向appstore 上传应用的时候遇到了各种问题,由于网上的一些教程都是很久以前写的了,现在发布网站有些改动,所以自己走了很多弯路,不多说了,自己记录下犯下的错误吧.我是按照这片博客操作的:点 ...

  9. Linux目录树详细说明

    Linux目录树详细说明 目录树的主要部分有root(/)./USR./var./home等等.下面是一个典型的linux目录结构如下: / 根目录 /bin 存放必要的命令 /boot 存放内核以及 ...

  10. 学习SQL关联查询

    通过一个小问题来学习SQL关联查询 原话题: 是关于一个left join的,没有技术难度,但不想清楚不一定能回答出正确答案来: TabA表有三个字段Id,Col1,Col2 且里面有一条数据1,1, ...