Question

我用canvas做了个画板，现在想用 <input type="color">来控制颜色

，但我不想刷新页面提交表单，那应如何获取选择的颜色呢（360极速环境下画板与按钮如下图）

Answer 1

<input type="color" name="" id="colorSelect" value="" />
<canvas	id="canvas" width="320" height="200" style="border:1px solid #eee;">您的浏览器不支持canvas</canvas>
<script>     
		var selector = document.getElementById("colorSelect");
		selector.onchange = function(){
			var color = this.value;
			var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext("2d");
			var w = canvas.width , h = canvas.height;
			ctx.fillStyle = color;
			ctx.fillRect(0, 0, w, h);
		}
</script>

追问

还有个问题。。。怎么把鼠标的样式改为默认的，我绘图的时候鼠标都是选中文本的那个长条状的样式。。。

Answer 2

引用龙youwei的回答：
<input type="color" name="" id="colorSelect" value="" /><canvas id="canvas" width="320" height="200" style="border:1px solid #eee;">您的浏览器不支持canvas</canvas><script> var selector = document.getElementById("colorSelect"); selector.onchange = function(){ var color = this.value; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var w = canvas.width , h = canvas.height; ctx.fillStyle = color; ctx.fillRect(0, 0, w, h); }</script>

CSS:
user-sellect: none;