刚刚在博客园落户了，希望能在这认识更多大神，希望能和大家交好朋友。
闲来无事，把以前用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>
下面是我画的一幅画= =
