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