从零开始学Canvas(一)

原创 zheling 译文 Canvas 3403阅读 2018-08-02 18:37:35 举报

学习网站:https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API 大部分是对该网站的翻译。

1.Canvas属性

canvas 只有两个属性:width / height ,默认值分别是 300px / 150px ,此外一般为 canvas 指定一个 id ,用于 DOM 操作。

切记:canvas 宽度不可通过 css 样式中的 width /height 来定义。因为若 css 定义的宽高比例不同于 canvas 默认比例,canvas 将会表现得扭曲混乱。

The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size: if the CSS sizing doesn't respect the ratio of the initial canvas, it will appear distorted.

2.上下文 context

初始画布是空白的,需通过上下文来创建和操作画布内容,上下文对象包含了许多画图工具函数。

3.路径和基础图形

坐标系统如图所示:

canvas中,仅支持的基础图形是矩形和路径,此外所有的图形必须通过路径 path 和一系列连点成线组合来完成的。

内置的常用方法:

3.1 矩形

1.fillRect(x, y, width, height),画填充矩形;
2.strokeRect(x, y, width, height),画空心矩形,即描边矩形;
3.clearRect(x, y, width, height),清除指定的矩形区域,清除即使指定区域完全透明化;
4.rect(x, y, width, height)。

3.2 画路径

路径,由点线构成,重要的一点是路径可以被关闭。
画路径很简单:

  1. 创建路径;
  2. 使用画图命令将路径渲染出来,你可以以描边 stroke 或 填充 fill 的方式来渲染路径。

相关函数:
1.beginPath(),创建一新路径,之后的绘图命令将直接应用于构建该路径;
2.Path methods,指任意用于定义不同路径的方法或操作;
3.closePath(),不强制但一般情况下与 beginPath() 成对出现,用于关闭路径,即将当前路径终点与当前路径的起点用直线连接起来以形成封闭图形;
4.stroke(),将路径描绘出来;
5.fill(),将路径填充出来。

beginPath() 之后,一般紧接着的操作是使用 moveTo() 来定义路径的起点坐标;
fill() 用于填充,既是填充要求路径必须是封闭的,该方法会自动封闭非封闭的图形,其实此时你就无需再多此一举去调用 closePath() 了。而 stroke() 就不属于这种情况了。

6.moveTo,两个主要用途,一是画布初始化后用于定义画笔起点;二是通过移动画笔来画断开连续的路径。
形象理解:moveTo 调用时好比将一支笔尖正停留在画纸上的画笔提起并移动到指定位置后再落下画笔笔尖到画布上以等待下一次绘制,如此一来原本连续的路径(只要笔尖未被提起,那么所绘制的路径都将是连续的,好比在纸上作一笔画)就被断开了。


上图即是画笔一笔画成的笑脸,因为是一笔画所以路径都被连了起来,对应的代码是将上面代码中的 cxt.moveTo() 的调用去掉。

7.lineTo(x,y),两点画直线,从当前点画直线到指定的坐标点。

8.画圆、圆弧
8.1 arc(x, y, radius, startAngle, endAngle, anticlockwise)参数:圆心坐标,半径,开始角度,结束角度,顺逆时针方向
8.2 arcTo(x1, y1, x2, y2, radius)
参数:圆弧以指定半径通过的指定的两点。

角度 angle :只接受 弧度数 ,radians = (Math.PI/180)*degrees ,角度数必须转成弧度数。

  1. 曲线
    9.1 quadraticCurveTo(cp1x, cp1y, x, y)
    从当前点画一曲线到 (x,y) ,其中曲线只有单个控制点。
    从当前点画一曲线到 (x,y) ,其中曲线有两个控制点。

什么是控制点?用于决定曲线的弯曲程度和走向,具体过程:将曲线的起止点与控制点相连成直线,再作以直线为切线的圆弧来画曲线。

  1. Path2D Object 的使用

4.Styles and Colors

4.1 主要就两种,填充 fillStyle 和描边 strokeStyle

fillStyle = color
strokeStyle = color

4.2 添加透明度

  1. cxt.globalAlpha = transparencyValue
    应用指定透明度到之后绘制的所有图形,transparencyValue值范围:0.0~1.0,0.0表示全透明,默认是1.0完全不透明。
  2. 直接使用 rgba()

4.3 line Styles 线条样式

1.lineWidth = value 线宽
关于线条坐标和宽度,如图,坐标位置是以线中心轴来定位的,宽度则是左右各占一半。

2.lineCap =(butt,round,square), 线末端样式 ,

很明显,round / square 会改变线的长度,其中,square 是在线末端添加一个 box ,与线等宽,高为一般。

3.lineJoin = (round,bevel,miter) , 线连接处样式

4.miterLimit = value
Establishes a limit on the miter when two lines join at a sharp angle, to let you control how thick the junction becomes.

5.getLineDash()
返回当前线条的虚线样式的数组,数组包含双数且非负的数字元素。

6.setLineDash(segments)
设置线条的虚线样式,虚线有什么样式?虚线由许许多多的短线构成,所以样式有 短线的长度 和 短线的间距。

7.lineDashOffset = value
指定从线条何处开始样式。

4.4 Gradients渐变

应用渐变样式,1.创建渐变对象; 2.渐变对象作为fillStyle or strokeStyle 的属性值即可。

创建渐变对象的两个方法:线性渐变、径向渐变
1.createLinearGradient(x1, y1, x2, y2)
线性渐变的起终点(x1, y1), (x2, y2)。

2.createRadialGradient(x1, y1, r1, x2, y2, r2)
径向渐变,参数是指定两个圆的圆心坐标和半径。

3.为渐变对象指定渐变颜色,gradient.addColorStop(position, color)
position 取值 0.0~1.0 ,color 必须是String。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复

博聚网