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

闲来无事，把以前用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. java 命令笔记

    http://www.hollischuang.com/archives/105 JPS jps位于jdk的bin目录下,其作用是显示当前系统的java进程情况,及其id号. jps相当于Solari ...

  2. 百度云语音识别，Audio2Txt（c#）

    百度云识别没有提供c#版本的sdk,下面给个c#的 1.打开网址http://developer.baidu.com/ 2.登陆 3.管理控制台>开发者服务管理 4.创建工程 5.输入名称,点击 ...

  3. poj2488骑士之旅

    题目大意:国际象棋里面的马,有那么8种跳法,然后题目给出一个棋盘的大小p*q, 求有没有路线可以使得这个马能把整个棋盘的格全部走一遍,有的话按照字典序将第一条路线打印出来. 注意:国际象棋是行是数字, ...

  4. DevExpress 学习使用之 PrintSystem

    这是来自群里边的一段,收集起来,碎片知识是很珍贵的.  傷心孤影(2072201)  16:14:41导出excel加标题用PrintableComponentLink小宝(462561442)  1 ...

  5. FAQ：仓储实现为什么在基础设施层？

    FAQ:仓储实现为什么在基础设施层? 目录 问答部分参考文章 问答部分返回目录 问: 仓储实现为什么在基础设施层? 答: 领域模型包含三种元素:实体.值对象和服务,这三种元素都可以以某种形式使用仓储, ...

  6. NodeJS的url信息截取模块url-extract

    NodeJS的url信息截取模块url-extract2013-09-12 22:49 by Justany_WhiteSnow, 212 阅读, 0 评论, 收藏, 编辑 上一篇文章,介绍了怎么利用 ...

  7. 冒泡动画按钮的简单实现（使用CSS3）

    冒泡动画按钮的简单实现(使用CSS3) 原始的参考文章是 http://tutorialzine.com/2010/10/css3-animated-bubble-buttons/ ,基本原理是利用了 ...

  8. escape,encodeURI,encodeURIComponent函数比较

    escape,encodeURI,encodeURIComponent函数比较 js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数 ...

  9. mysql 建表 AUTO_INCREMENT , 数据类型 VARCHAR

    建表: 原帖地址: http://blog.sina.com.cn/s/blog_5da3d5c50100bjh0.html MySQL AUTO_INCREMENT 简介 (2009-01-02 1 ...

  10. jps 命令使用

    jps(Java Virtual Machine Process Status Tool)是JDK1.5提供的一个显示当前所有java进程pid的命令,简单实用,非常适合在linux/unix平台上简 ...