canvas进修条记之2d画布基本的实现

< canvas > 是一个可以行使剧本（凡是是js）来画图的HTML元素

< canvas > 最早由Apple引入WebKit，用于Mac OS X 的 Dashboard和 Safari

现在，全部主流的赏识器都支持它（IE9+,更低版本需引入Explorer Canvas来支持）

1. 开始绘图（渲染上下文）

< canvas > 元素缔造了一个牢靠巨细的画布，其上的渲染上下文CanvasRenderContext2D，可以用来绘制和处理赏罚要展示的内容。

若要在canvas上画图，起首得获取CanvasRenderContext2D2d渲染上下文。（此处指2d的，不谈webgl）

const canvas = document.getElementById('mycanvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'pink'; ctx.fillRect(10, 10, 300, 300);

示例

2. CanvasRenderContext2D的属性：

通过配置上下文的属性，可以指定画图的样式。

全部属性如下：

属性 简介
canvas   canvas元素  
fillStyle   用来添补路径的当前的颜色、模式或渐变  
font   字体样式  
globalAlpha   指定在画布上绘制的内容的不透明度  
globalCompositeOperation   指定颜色怎样与画布上已有的颜色组合（合成）  
lineCap   指定线条的结尾怎样绘制  
lineDashOffset   配置虚线偏移量  
lineJoin   指定两条线条怎样毗连  
lineWidth   指定画笔（绘制线条）操纵的线条宽度  
miterLimit   当 lineJoin 属性为 "miter" 的时辰，这个属性指定了斜毗连长度和线条宽度的最大比率  
shadowBlur   恍惚结果水平  
shadowColor   阴影颜色  
shadowOffsetX   阴影程度偏移间隔  
shadowOffsetY   阴影垂直偏移间隔  
strokeStyle   用于画笔（绘制）路径的颜色、模式和渐变  
textAlign   文本的对齐方法  
textBaseline   笔墨垂直偏向的对齐方法  

3. Canvas宽高

Canvas的宽高必要用属性值width，height来指定

若未指定，则Canvas 的默认巨细为300×150

通过样式指定的宽高，只是canvas元素的表现巨细，并不是画图情形的巨细

canvas {width: 1000px;height: 600px;} <canvas id="mycanvas" width="1000" height="600"></canvas> <canvas id="mycanvas1" width="500" height="300"></canvas> <canvas id="mycanvas2"></canvas> ... ctx.fillStyle = "red"; ctx.fillRect(10, 10, 100, 100);

宽高示例

为什么样式配置了同样巨细，表现却截然差异的环境呢？

canvas自己有两套巨细：一个是元素自己巨细，一个是画图外貌（drawing surface）的巨细

假如通过width,height属性来配置，是同时修改了元素自己和画图外貌巨细，

假如canvas元素的巨细不切合画图外貌巨细时，则会对画图外貌举办缩放，使之切合元素自己巨细，

无非凡需求，提议直接行使canvas的width和height就好

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!