![6a563d8b94bcc6d30349c4e6b4ee005b.png](https://i-blog.csdnimg.cn/blog_migrate/702af7d34b38be0dbfc136852ad0214f.png)
DEMO:
canvas-sketchraymondguo78.github.io学到的知识点:
<canvas>
元素
<canvas>
是一个替换元素,需要结束标签</canvas>
。它只有两个标签:width 和 height,当没有设置宽高,canvas 会默认为宽300px和高150px(使用CSS设置canvas 的宽高会导致画布内容模糊)。
the rendering context
canvas 起初是空白的。<canvas>
需要通过脚本,它有一个叫getContext()
方法是用来获得 rendering context or painting. 对于2D图像而言,可以使用 CanvasRenderingContext2D。
varcanvas=document.getElementById("canvasCtx"); //为元素<canvas>得到DOM对象
varctx=canvas.getContext("2d"); //使用2d来绘制上下文
绘制形状:方形 rectangular
ctx.fillRect(x, y, width, height); //绘制一个实心方形
ctx.strokeRect(x, y, width, height); //绘制一个方形边框
ctx.clearRect(x, y, width, height); //清除指定方形区域,变成透明
绘制路径
ctx.beginPath(); //开始生成一条路径
ctx.moveTo(x, y); //路径移到指定位置
ctx.lineWidth; //设定路径宽度
ctx.lineTo(x, y); //路径连接指定位置
ctx.lineTo(x, y); //路径连接另一指定位置
ctx.fill(); //填充各连接路径内的区域
JS HTML event
onmousedown = "SomeJavaScriptCode"
滑鼠按下会触发的事件
onmousemove = "SomeJavaScriptCode"
滑鼠移动会触发的事件
onmouseup = "SomeJavaScriptCode"
滑鼠松开会触发的事件
document.documentElement.clientWidth
获取页面可见宽度
document.documentElement.clientHeight
获取页面可见高度
window.onresize
获取当前窗口resize事件
element.onclick
返回当前元素的click 的事件