canvas实现画板功能（渐变、动画、阴影...）

最新推荐文章于 2024-09-26 19:50:48 发布

diaoshenyu7763

最新推荐文章于 2024-09-26 19:50:48 发布

阅读量195

点赞数

原文链接：http://www.cnblogs.com/xiamuqing/p/5988929.html

版权

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

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

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

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

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="utf-8">
  5     <title></title>
  6     <style>
  7         body {
  8             text-align: center;
  9         }
 10 
 11         canvas {
 12             border: 1px dashed green;
 13         }
 14         #cvs1{
 15             border:none;
 16         }
 17     </style>
 18 </head>
 19 <body>
 20 <canvas id="cvs" width="800" height="600"></canvas>
 21 <canvas id="cvs1" width="200" height="150"></canvas>
 22 <button id="clear">清除</button>
 23 <input type="color" id="changecolor">
 24 <!--<button id="btn1">蓝色</button>
 25 <button id="btn2">绿色</button>
 26 <button id="btn3">黄色</button>-->
 27 
 28 <!--设置画笔粗细-->
 29 <select name="" id="panWidth">
 30     <option value="1">1px</option>
 31     <option value="10">10px</option>
 32     <option value="30">30px</option>
 33 </select>
 34 <script>
 35     var cvs = document.getElementById("cvs");
 36     var context = cvs.getContext('2d');
 37     var points = [];
 38     var cvs1 = document.getElementById("cvs1");
 39     var context1 = cvs1.getContext('2d');
 40 
 41     /*太阳(放射性渐变)*/
 42     context.beginPath();
 43     var grandianR=context.createRadialGradient(30,30,10,50,50,150);
 44     grandianR.addColorStop(0,"#fff");
 45     grandianR.addColorStop(1,"yellow");
 46     context.fillStyle=grandianR;
 47     context.arc(80,80,60,0,2*Math.PI);
 48     context.fill();
 49 
 50 
 51     /*文字*/
 52     context.save();
 53     context.beginPath();
 54     //文字线性渐变
 55     var grandient=context.createLinearGradient(250,200,600,50);
 56     grandient.addColorStop(0,"red");
 57     grandient.addColorStop(0.2,"orange");
 58     grandient.addColorStop(0.4,"yellow");
 59     grandient.addColorStop(0.6,"green");
 60     grandient.addColorStop(0.7,"#50C0EE");
 61     grandient.addColorStop(0.8,"blue");
 62     grandient.addColorStop(1,"purple");
 63     context.fillStyle=grandient;
 64     context.font="50px 方正喵呜体";
 65     //文字阴影
 66     context.shadowBlur=1;
 67     context.shadowOffsetX=2;
 68     context.shadowOffsetY=1;
 69     context.shadowColor ="#000";
 70     context.fillText("百折不挠小青青",250,80);
 71     context.restore();
 72 
 73     context.beginPath();
 74     var agle=0;
 75     context1.save();
 76     context1.translate(cvs1.width-100,cvs1.height-80);
 77     setInterval(function () {  //定时器导致84行小画布不会出现在大画布里头
 78         context1.clearRect(-200,-100,200,100);
 79         context1.rotate(agle);
 80         context1.strokeRect(0,0,50,50);
 81         agle+=0.01;
 82     },30)
 83     context1.stroke();
 84       //  context.drawImage(cvs1,0,0,100,100);
 85 
 86 
 87 
 88     var mouseDown = false;
 89     //给画布注册鼠标按下事件
 90     cvs.addEventListener("mousedown", function (e) {
 91         mouseDown = true;
 92         points.push({x: e.offsetX, y: e.offsetY});
 93     })
 94     cvs.addEventListener("mouseup", function () {
 95         mouseDown = false;
 96         points = [];
 97     })
 98     cvs.addEventListener("mousemove", function (e) {
 99         if (mouseDown) {
100             context.beginPath();
101             //获取鼠标在画布的位置
102             var x = e.offsetX;
103             var y = e.offsetY;
104             //将坐标存入数组里，再通过循环连接起来
105             points.push({x: x, y: y});
106             context.moveTo(points[0].x, points[0].y);
107             for (var i = 1; i < points.length; i++) {
108                 context.lineTo(points[i].x, points[i].y);
109             }
110             context.stroke();
111         }
112     })
113     var clear = document.getElementById("clear");
114     clear.onclick = function () {
115         context.clearRect(0,0,cvs.width,cvs.height);
116     }
117     //通过调色板给画笔改变颜色
118     var changecolor=document.getElementById("changecolor");
119     changecolor.onchange=function () {
120         context.strokeStyle=this.value;
121      //   console.log(this.value);
122     }
123 //    var btn1 = document.getElementById("btn1");
124 //    var btn2 = document.getElementById("btn2");
125 //    var btn3 = document.getElementById("btn3");
126 
127 //    btn1.onclick = function () {
128 //        context.strokeStyle = "blue";
129 //    }
130 //    btn2.onclick = function () {
131 //        context.strokeStyle = "green";
132 //    }
133 //    btn3.onclick = function () {
134 //        context.strokeStyle = "yellow";
135 //    }
136     var panWidth=document.getElementById("panWidth");
137     panWidth.onchange=function () {
138       //  console.log(this.value);
139         context.lineWidth=this.value;
140     }
141 
142 </script>
143 </body>
144 
145 </html>