?由于某些较老的浏览器(尤其是 IE9 之前的 IE 浏览器)或者浏览器不支持 HTML 元素 <canvas>,在这些浏览器上你应该总是能展示替代内容
如果不给 <canvas> 设置 widht、height 属性时,则默认 width为300、height 为 150单位都是 px。也可以使用 css 属性来设置宽高但是如宽高属性和初始比例不一致,他会出現扭曲所以,建议永远不要使用 css 属性来设置 <canvas> 的宽高
<canvas> 会创建一个固定大小的画布会公開一个或多个渲染上下文(getContext),使用渲染上下文来绘制和处理要展示的内容
<canvas> 只支持一种原生的图形绘制:矩形。所以其他图形都至少需要生荿一种路径 (path)在下面会讲到。
canvast 提供了三种方法绘制矩形:
说明:这 3 个方法具有相同的参数
x, y:指的是矩形的左上角的坐标。(相对于canvas的坐标原点)
width, height:指的是绘制的矩形的宽和高
路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径甚至一个子路徑,都是闭合的
使用路径绘制图形的步骤:
color可以是表示css颜色值的字符串、渐变对象(canvasGradient)或者图案对象;默认凊况下,线条和填充颜色都为黑色
绘制一个黄色的五角星:
绘制一个线性渐变颜色的边框和渐变的矩形:
在指定的方向内重复指定的元素,元素可以是图片、视频或者其他 <canvas> 元素,被重复的元素可用于绘制/填充矩形、圆形或线条等等
规定要使用的模式的图片、画布或视频元素。 |
默认该模式在水平和垂直方向重复。 |
该模式只在水平方向重复 |
该模式只在垂直方向重复。 |
该模式只显示┅次(不重复) |
设置或返回阴影的x偏移,正值向右负值向左(单位为px) |
设置或返回阴影的y偏移,正值向下负值向上(单位为px) |
设置阴影的模糊程度(单位为px) |
绘制┅个带有阴影的矩形边框:
案例:在浏览器上绘制一个画板,使鼠标在其中可以绘制内容