终于有了自己的博客，github真的好厉害，开源真的好棒。
我是小青青，喜欢旅行，喜欢结交朋友，喜欢一切美好事物，希望在这里能和大家成为好朋友。
这个是用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("欢迎大家来到我家~",200,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>
