Canvas API的介绍

来源:http://www.chinese-glasses.com 作者:Web前端 人气:158 发布时间:2020-04-07
摘要:时间: 2019-10-12阅读: 104标签: 尺寸 首先我们来了解以下canvas标签: 我们知道,清空canvas画布内容有以下两个方法。 第一种方法是cearRect函数: canvas是HTML5新增的标签,用于在网页上实时生

时间: 2019-10-12阅读: 104标签: 尺寸

首先我们来了解以下canvas标签:

我们知道,清空canvas画布内容有以下两个方法。 第一种方法是cearRect函数:

canvas是HTML5新增的标签,用于在网页上实时生成图像。

context.cearRect(0,0,canvas.width,canvas.height)

<canvas width="" height=""></canvas>

第二种方法就是用原值重新设置一下canvas的宽(或者高)

canvas是画布的意思,所以canvas标签只有两个属性,一个是width(表示画布的宽度),一个是height(表示画布的高度)。

canvas.width = canvas.width// or canvas.height = canvas.height

下面来说一下canvas的API:

第二种方法可以起作用,是因为canvas的一个特点:每当画布的高度或宽度被重设时,画布内容就会被清空

canvas的主要属性和方法:

在一个可视化项目中,我们发现在一些电脑上面总是会出现效果错乱的情况。 经过调试,我们发现,原来是“canvas.width = canvas.width”惹的祸。普通屏幕下面下不会有问题,但是如果屏幕是高清屏,就会出现问题。这是因为,高清屏下,我们为了处理绘制图形模糊的问题,通常会做如下处理:

save():保存当前环境的状态

restore():返回之前保存过的路径状态和属性

createEvent()

getContext():返回一个对象,指出访问绘图功能必要的API

toDateURL():返回canvas图像的URL

 function setupCanvas(canvas) { let width = canvas.width, height = canvas.height, dpr = window.devicePixelRatio || 1.0; if (dpr != 1.0 ) { canvas.style.width = width + "px"; canvas.style.height = height + "px"; canvas.height = height * dpr; canvas.width = width * dpr; ctx.scale(dpr, dpr); } }

颜色、样式和阴影属性和方法:

我们知道,高清屏下window.devicePixelRatio都大于1。所以在绘图之前画笔会被缩放:

fillStyle:设置或返回用于填充绘画的颜色、渐变或模式

strokeStyle:设置或返回用于笔触的颜色、渐变或模式

shadowColor:设置或返回用于阴影的颜色

shadowBlur:设置或返回用于阴影的模糊级别

shadowOffsetX:设置或返回阴影距形状的水平距离

shadowOffsetY:设置或返回阴影距形状的垂直距离

createLinearGradient():创建线性渐变(用在画布内容上)

createPattern():在指定的方向上重复指定的元素

createRadialGradient():创建放射状/环形的渐变(用在画布内容上)

addColorStop():规定渐变对象中的颜色和停止位置

ctx.scale(dpr, dpr);

线条样式属性和方法

我们知道cavnas是基于状态的绘图组件。 其中缩放比例值也在状态管理之中。 当我们重新设置canvas的宽(高也一样)的时候,不仅会清空canvas的画布内容,同时还会把绘图状态重置到最原始的状态,原始状态下画笔的缩放比例是1,缩放比例值会被重置为1,因而导致绘制效果错乱。

lineCap:设置或返回线条的结束端点样式

10bet,lineJoin:设置或返回两条线相交时,所创建的拐角类型

lineWidth:设置或返回当前的线段宽度

miterLimit:设置或返回最大斜接长度

Canvas的API-路径方法

fill():填充当前绘图(路径)

stroke():绘制已定义的路径

beginPath():起始一条路径,或重置当前路径

moveTo():把路径移动到画布中的指定点,不创建线条

closePath():创建从当前点回到起始点的路径

lineTo():添加一个新点,创建从该点到最后指定点的线条

clip():从原始画布剪切任意形状和尺寸的区域

quadraticCurveTo():创建二次贝塞尔曲线

bezierCurveTo():创建三次贝塞尔曲线

arc():创建弧/曲线(用于创建圆形或部分圆)

arcTo():创建两切线之间的弧/曲线

isPointInPath():如果指定的点位于当前路径中,返回布尔值

Canvas的API-转换方法

本文由10bet发布于Web前端,转载请注明出处:Canvas API的介绍

关键词:

频道精选

最火资讯