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

闲来无事，把以前用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. Coding the Matrix Week 1 The Vector Space作业

    Coding the Matrix: Linear Algebra through Computer Science Applications 本周的作业较少,只有一个编程任务hw2.作业比较简单,如 ...

  2. c#跟objective-c语言特性

    c#跟objective-c语言特性的对比 拿c#语言跟objective-c做个对比,记录下自己认为是差不多的东西. 学过objc的人相信对category这个东西肯定不陌生,它可以让我们在没有源码 ...

  3. 企业架构与建模之使用ArchiMate进行分析

    企业架构与建模之使用ArchiMate进行分析(全系列完) 4. 使用ArchiMate进行分析 正如前面所说的那样,一个企业整体效率的提升有时并不是通过某一个领域内的优化就能达到的,而且这种忽视全局 ...

  4. [转]Inside Swift

    原文地址:http://www.eswick.com/2014/06/inside-swift/   Inside Swift Swift is Apple's new programming lan ...

  5. SOCKET网络编程细节问题（2）

    SOCKET网络编程快速上手(二)——细节问题(2) 2.TCP数据包接收问题 对初学者来说,很多都会认为:客户端与服务器最终的打印数据接收或者发送条数都该是一致的,1000条发送打印,1000条接收 ...

  6. API HOOK库

    API HOOK库 API HOOK有两种做法,一种是SetWindowHookEx,简单易用,但如果做其它的HOOK,如HOOK OpenProcess,就需要修改内存地址了,内存地址可以通过Wri ...

  7. 线性判别分析算法（LDA）

    1. 问题 之前我们讨论的PCA.ICA也好,对样本数据来言,可以是没有类别标签y的.回想我们做回归时,如果特征太多,那么会产生不相关特征引入.过度拟合等问题.我们可以使用PCA来降维,但PCA没有将 ...

  8. javascript遍历select下拉框判断其中值是否与指定值相等

    用jquery多了,就忘了原生的js是如何写的了,还需要多加巩固. 需求:jsp回显一select下拉框.选中指定值. 用户点击修改 该select进行已有值回显.有两种解决方法 一.js中获取用户的 ...

  9. ckedit 在源码模式下插入文本

    ckedit的源码模式下是禁用insertText方法的 ,下面是解决方案 if(CKEDITOR.instances[Itemname].mode=='wysiwyg'){ CKEDITOR.ins ...

  10. 新版C#编译器关于函数闭包

    新版C#编译器关于函数闭包的一处更改   在Visual Basic.NET中,如果你写下类似下面的代码: Public Sub Test() For i = 0 To 100 Dim func =  ...