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

闲来无事，把以前用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. 我的Mac应用

    笔记内容 我的Mac软件 用Mac已经2年+,主要用来看电影.听音乐.写日记,其实也是因为偶像uSi在用,选择Mac不仅仅是因为Mac编程特别好用,更是一种生活方式 办公软件 iWork超爱iWork ...

  2. 变易算法 - STL算法

    欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/mutating-algorithms.h ...

  3. IP数据报是如何在网络中转发的？

    首先发送方抽取目的站的网络前缀,来判断是否目的站是否位于同一网络上,如果在二者有相同的网络前缀,则,直接使用直接交付的方式, 否则,使用由路由器互连的间接交付,这要借助IP路由表,采用表驱动法,路由表 ...

  4. 5 MySQL索引

    目录: 1. 索引概述 1.1 为什么引入索引 1.2 什么是索引 1.3 索引的好处 1.4 索引的不足 1.5 索引分类 2. 索引设计原则 3. 索引建立和删除 3.1 索引创建 3.2 索引删 ...

  5. github上写个人简历

    随笔- 70  文章- 0  评论- 567  在github上写个人简历——先弄个主页   起因 不知道园友们在使用智联招聘等网站填写简历的时候对要求输入的内容有没有一种无力感,不吐槽了反正就一句话 ...

  6. YARN

    YARN 介绍 Apache Hadoop YARN作为hadoop的子项目加入到Hadoop Common (core libraries), Hadoop HDFS (storage) and H ...

  7. CentOS6.8使用源码安装Git

    一.安装git所需的依赖 sudo yum groupinstall "Development Tools" sudo yum install gettext-devel open ...

  8. Microsoft Message Analyzer （微软消息分析器，“网络抓包工具 - Network Monitor”的替代品）官方正式版现已发布

    Microsoft Message Analyzer (微软消息分析器,“网络抓包工具 - Network Monitor”的替代品)官方正式版现已发布 来自官方日志的喜悦 被誉为全新开始的消息分析器 ...

  9. 基于Redis的CustomerSessionProvider（二）

    接一的考虑,那么就做Redis的SessionProvider就非常简单了,只考虑整个Session的缓存,主要实现以下两个函数就可以了 public override SessionStateSto ...

  10. 项目结构的设计（iOS篇）

    项目结构的设计(iOS篇) 本文附带源码:YoungHeart-Chapter-02.zip 在设计任何一个框架之前,都应规划好项目结构. 假定Git作为我们的项目管理工具.我们要建立两个仓库,一个用 ...