Canvas
文章平均质量分 95
用于在 HTML5 中,利用 JavaScript 绘制图形
Deniro Lee
这个作者很懒,什么都没留下…
展开
-
说说在 Canvas 中如何判断某个点是否在路径上
Context 的 isPointInPath() 可用于判断某个点是否在路径上。如果指定的点位于当前路径中,则返回 True。语法为:context.isPointInPath(x,y);参数描述x测试点的 x 坐标y测试点的 y 坐标context.strokeStyle = 'green';context.lineWidth = 5;context.moveTo(100, 100);context.lineTo(150, 100);context.line原创 2020-10-08 09:22:58 · 1012 阅读 · 0 评论 -
说说在 Canvas 中如何清除画布
有几种方法可以清除画布中的内容。1 重置画布宽与高假设目前画布有一个彩虹圆形,我们现在要把它清除掉。重置画布宽与高,就会移除当前画布内容。document.querySelector("#canvas");...var w = theCanvas.width;var h = theCanvas.height;theCanvas.width = w;theCanvas.height = h;运行结果:注意:该方法对图片填充的形状无效!2 clearRect()该方法可以在画布上原创 2020-10-08 09:08:31 · 1659 阅读 · 2 评论 -
说说在 Canvas 中如何添加阴影
Canvas 的 context 中有四个参数可以用于设置阴影相关属性。方法名说明shadowOffsetX阴影 x 轴偏移量。可以为正值或负值;负值表示在左侧和上方创建阴影,正值表示在底部和右侧创建阴影。shadowOffsetY阴影 y 轴偏移量。其它特性与阴影 x 轴偏移量相同。shadowBlur设置阴影模糊程度。shadowColor设置阴影颜色。可以是颜色名称、rgb()、rgba() 或十六进制数值字符串。我们有一张 500×500 像素的原创 2020-10-07 11:37:49 · 1450 阅读 · 0 评论 -
说说在 Canvas 中如何用图片来填充形状
context 的 createPattern() 方法可以在指定的方向内重复指定的元素。语法为 context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");。参数描述image要使用的图片、画布或视频元素。repeat默认值,表示在水平和垂直方向重复。repeat-x表示在水平方向重复。repeat-y表示在垂直方向重复。no-repeat表示只显示一次(不重复)。假设有一原创 2020-10-07 11:05:11 · 3859 阅读 · 0 评论 -
说说在 Canvas 中如何填充渐变颜色
渐变颜色填充方式有两种:线性或径向。线性渐变填充会创建一个水平 、 垂直或者对角线的填充图案。径向渐变填充会自中心点创建一个放射状填充图案。1 线性渐变1.1 线性水平渐变(1)基本形状Steve Fulton 与 Jeff Fulton 举了一个示例,来说明如何设置线性水平渐变。//创建渐变对象var gr = context.createLinearGradient(0, 0, 100, 0);//颜色断点gr.addColorStop(0, 'rgb(255,0,0)');原创 2020-10-07 09:21:46 · 3749 阅读 · 0 评论 -
说说在 Canvas 中如何填充形状基本颜色
Canvas 的 fillSytle 属性可设置形状的填充颜色。该属性可接受多种类型的颜色描述值。(1)颜色字符串名称 context.fillStyle = "red"; context.fillRect(100, 100, 100, 100);运行结果:注意:HTML 4.0 只支持 16 种颜色名,它们是:aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yello原创 2020-10-05 08:32:15 · 4535 阅读 · 0 评论 -
说说 Canvas 的缩放功能
使用 scale() 方法可以缩放当前绘图。语法:context.scale(scalewidth,scaleheight);。参数描述scalewidth缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)scaleheight缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, 依次类推)context.strokeRect(5,5,25,15);context.scale(2,2);context.strokeR原创 2020-08-23 10:20:31 · 6474 阅读 · 0 评论 -
说说 Canvas 的旋转功能
首先我们先来看看两个函数。1 setTransform()画布上的每个对象都拥有一个当前的变换矩阵。利用 setTransform() 我们可以缩放、旋转、移动以及倾斜当前对象。setTransform() 方法会把当前的变换矩阵重置为单位矩阵,然后以相同的参数运行 transform()。语法:context.setTransform(a,b,c,d,e,f);参数描述a水平缩放绘图b水平倾斜绘图c垂直倾斜绘图d垂直缩放绘图e水平移原创 2020-08-23 09:45:42 · 1417 阅读 · 0 评论 -
说说如何使用 Canvas 绘制弧线与曲线
绘制弧线前,我们需要先了解角度与弧度的概念。1 角度与弧度(1)角度两条射线从圆心向圆周射出,形成一个夹角和夹角正对的一段弧。当弧长正好等于圆周长的 360 分之一时,两条射线的夹角的大小为1度 。( 单位 :º )(2)弧度两条射线从圆心向圆周射出,形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时,两条射线的夹角大小为1弧度(单位:rad)。具体计算公式为:rad 即弧度单词 radian 的缩写。角度转换为弧度,推导与计算公式为:2 弧线弧线可以是圆,也可以是圆的原创 2020-08-02 10:53:07 · 4751 阅读 · 2 评论 -
说说如何使用 Canvas 路径来绘制线段
在 Canvas 中,调用 2d context 对象的 beginPath() 函数就会开始一个路径绘制,调用 closePath() 函数结束一个路径绘制。连接路径内的两个点的路径称为子路径。如果终点与起点相连,子路径就称为封闭路径。我们需要绘制的线段代码,就包含在这两个函数之间。1 简单直线线段context.strokeStyle = "black";context.lineWidth = 10;context.lineCap = 'square';context.beginPath()原创 2020-06-21 12:04:43 · 900 阅读 · 0 评论 -
说说如何使用 Canvas 绘制基本矩形
HTML5 提供的 canvas 元素,可以让我们使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,我们可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。这次先说说如何绘制基本矩形。1 搭建 Canvas 2D 环境(1)引入 <canvas> 标签在 HTML 的 <body> 中新增一个 <canvas> 标签。形如:<canvas id="canvas" width="500" height="5原创 2020-06-14 10:40:21 · 837 阅读 · 0 评论 -
说说如何使用 canvas 进行 2D 绘图
canvas 的 2D context 可以绘制简单的 2D 图形。它的 2D context 坐标开始于 <canvas> 元素的左上角,原点坐标是(0,0)。所有的坐标值都基于这个原点,x 值越大表示越靠右,y 值越大表示越靠下。width 和 height 表示水平和垂直方向上可用的像素数。1 填充和描边填充就是用指定的样式填充图形;而描边就是给图形的边缘画线。它们分别对应两个属性:fillS原创 2017-07-18 16:00:26 · 3144 阅读 · 18 评论 -
说说 canvas 的基本用法
要使用 <canvas> 元素,要先设置 width 和 height,它们决定了绘图的区域大小。在开始和结束标签中是后备信息,如果浏览器不支持 canvas,就会显示这些信息:<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>也可以为 canvas 元素添加 CSS 样式,如果不添加样式或者不原创 2017-07-13 14:26:44 · 789 阅读 · 0 评论