canvas 文字颜色_Canvas画板与鼠标监听

看完这篇博客，你将了解：

1.鼠标监听事件

2.canvas 尺寸

3.canvas 语法

4.按钮更换套路

5.拾遗

---

一、鼠标监听事件（要求熟记）

id.onmousedown = function(e){}

id.onmousemove = ...

id.onmouseup = ...

id.onwheel = ...

关键属性：

clientX,clientY：鼠标位置的视图坐标

layerX,layerY：鼠标位置在id上相对坐标

一张图说明区别

二、canvas尺寸

1.canvas的尺寸可以用自带属性width,height调整，但是很难用css设置，原因是css指定的宽高下，整个canvas会根据自身内容缩放。

一个简单的理解：canvas跟图片是一样的，都有自己的宽、高，css若去改变它，会引起缩放。

2.如何根据窗口大小自适应调整canvas尺寸？

引入：如何获取页面的宽高？

pageWidth = document.documentElement.clientWidth

pageHeight = document.documentElement.clientHeight

因此，只需：

step1.一开始修改尺寸

	canvas.width = document.documentElement.clientWidth
	canvas.Height = document.documentElement.clientHeight

step2.监听onresize事件（持续修改尺寸）

	document.onresize = function(){/*以上两句*/}

三、canvas语法

1.套路开头

var yyy = document.getElementById('canvas-id');
var context = yyy.getContext('2d');

2.常见动作

context.stroke() //描边
context.fill()   //填色
context.beginPath()  //画线开始
context.closePath()  //画线结束

3.样式语句

context.strokeStyle = "/*边框颜色*/"
context.fillStyle = "/*填充颜色*/"
context.lineWidth = "/*线形粗细*/"

4.画线

5.画圆

API

图解API

这是对API实现圆方式的补充说明

例子

四、按钮更换套路

需求：点击画笔按钮，按钮文字改为“橡皮檫”，点击橡皮檫按钮，按钮文字改为“画笔”。

新手做法：if-else

点击查看

老司机做法：按钮一分为二

点击查看

老司机做法更优的原因：代码里的if-else越多，越容易出错。我们最好保证一个按钮只做一件事，然后在每件事里平铺直叙。

---

五、拾遗

1.事件监听编程套路

console.log(x)法：展开x详细，便于找出所需变量。

监听套路

也可通过关键单词找到MDN文档

2.如何为动态创建的元素添加样式？

a:element.style = "xx:yy; xx2:yy2; xx3:yy3; ..."

也可以写好一个class，然后将className添加给元素

3.对象定义与赋值

var point = {x:undefined,y:undefined}
point = {x:x,y:y}