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

闲来无事，把以前用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到C （大纲）

    Binder机制,从Java到C (大纲)   转载请标注:张小燕:http://www.cnblogs.com/zhangxinyan/p/3487381.html 前段时间一直在看有关Binder ...

  2. Linux网络编程(五)

    /*Linux网络编程(五)——多路IO复用之select() 网络编程中,使用IO复用的典型场合: 1.当客户处理多个描述字时(交互式输入以及网络接口),必须使用IO复用. 2.一个客户同时处理多个 ...

  3. Android过滤Logcat输出

    logcat和grep配合使用 1.打印特定tag的log,如打印Tag为Adm的Log        adb logcat | grep Adm        adb logcat | grep - ...

  4. MySQL的一些基本查询，创建存储过程等

    常用的查询条件有1.比较:=,<,>,<=,>=,!=,<>,!>,!<              2.确定范围:between and,not bet ...

  5. Python自动化测试 -ConfigParser模块读写配置文件

    C#之所以容易让人感兴趣,是因为安装完Visual Studio, 就可以很简单的直接写程序了,不需要做如何配置. 对新手来说,这是非常好的“初体验”, 会激发初学者的自信和兴趣. 而有些语言的开发环 ...

  6. 超级强悍的PHP代码编辑器PHPstorm及配置

    如何下载安装 官方网站:http://www.jetbrains.com/phpstorm/,本篇文章展示的是5.0版本以,所以,如果你的软件版本过高,可能可有误,所以,如果有问题,请在本站留言,做为 ...

  7. 在C中判断变量存储类型（字符常量／数组／动态变量）

    在C中判断变量存储类型(字符常量/数组/动态变量) 在chinaunix论坛上有人问到关于变量存府类型的问题,我觉得可以写个测试代码加深大家对内存使用和布局的理解.下面我把原问题及处理办法贴出来,限供 ...

  8. ExtJS初接触 - 在项目中使用ExtJS

    ExtJS初接触 - 在项目中使用ExtJS 今天ExtJS官网发布了ExtJS最新正式版4.2.1.Ext JS 4.2.1 正式版 下载 ExtJS为开发者在开发富客户的B/S应用中提供丰富的UI ...

  9. 精通CSS+DIV基础总结（三）

    Div+CSS可是实现简单的网页设计,对于需要添加动作,更方便的交互,Javascript给我们提供了方便:数据的存储可以利用XML使其更加方便:而对于减少页面与服务器的交互,可以利用Ajax技术,与 ...

  10. 提高你的Java代码质量吧：不要让类型默默转换

    一.分析  在Java运算中的类型转换,是先运算在进行类型转换的.具体场景如下. 二.场景  在如下程序中: public class Client{ public static final int ...