首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

【十天自制软渲染器】DAY 02:画一条直线(DDA 算法 & Bresenham’s 算法)

如果你喜欢我的文章,可以把我的公众号设为星标 ?,这样每次有更新就可以及时推送给你啦。...第一天我们搭建了 C++ 的运行环境并画了一个点,根据 点 → 线 → 面 的顺序,今天我们讲讲如何画一条直线。...1.DDA 直线算法 1.1 简单实现 我们先来回顾一下中学的几何知识,如何在二维平面内表示一条直线?最常见的就是斜截式了: 其中斜率是 ,直线在 轴上的截距是 。...斜截式在数学上是没啥问题的,但是在实际的工程项目中,因为硬件资源是有限的,我们不可能也没必要表示一条无限长度的直线,现实往往是已知一条线段的起点 和终点 ),然后把它画出来。...toyrenderer_day02_obj 今天学习了如何画一条线,明天我们学习如何画一个三角形。 ?如果你喜欢我的文章,希望点赞? 收藏 ? 在看 ? 三连支持一下!!!

2.2K20

【前端就业课 第一阶段】HTML5 零基础到实战(十一)canvas 基础

1_bit:接下来代码: context.lineTo(200,200); 1_bit:的意思也很简单,就是你之前使用 moveTo 找到了一个洛必点,那么现在 lineTo 就是画一条直线,你要把这一条直线画到哪...小媛:一条一条线段的画? 1_bit:哪有那么麻烦,很简单的,直接使用一个方法 fillRect,下面是一个完整的示例。 <!...20,170 处,那么此时肯定是一条垂直的直线,接着再从20,170 处绘制一条直线到 170,170 处,那么此时就有了三角形的两条边,接着再从 170,170 处返回最先落笔点,那么此时三角形绘制完毕...零基础到实战(九)列表 【前端就业课 第一阶段】HTML5 零基础到实战(八)表单详解 【前端就业课 第一阶段】HTML5 零基础到实战(七)文字及图片样式 【前端就业课 第一阶段】HTML5...零基础到实战(六)表格详解 【前端就业课 第一阶段】HTML5 零基础到实战(五)基础元素 【前端就业课 第一阶段】HTML5 零基础到实战(四)伪类与伪元素 【前端就业课 第一阶段】HTML5

40220

HTML5-Canvas初探(1)

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。...可以理解为定位画笔在画布上的位置(注意所有绘图方法所定义的坐标是相对canvas而言的而不是浏览器窗口,对canvas来说,最左上角的点的坐标是(0,0)) .lineTo(x坐标 , y坐标) 顾名思义,就是画一条直线到某个点...AfterEffect的朋友会很清楚,不给运动路径加stroke特效的画是不存在描边效果的,canvas也一样,想要运动路径轨迹能有视觉效果,需要使用相应的上色/描边方法 ---- 自此我们很轻松地绘制了一条黑色的直线...---- 另外有一个问题,如果上方我们会出来的两条线段(嗯,一条折线,一条直线),我们希望第一条折线是蓝色的,第二条直线是红色的,应当怎么做?...我们这样 效果如下: 注意这里我还加了个 ctx.lineWidth = 8 来设定线段的粗度。

1.4K20

网页|HTML5 也可以画一画(canvas)

1.引言 在日常生活中总喜欢涂涂画画写写,这样可以使表达更加直观,记录的也更加详细,而在HTML5中同样可以画一画。...canvas意为画布,现实生活中用它来作画,在HTML5中的canvas与之类似,可以称它为“网页中的画布”,有了这个画布便可以轻松的在网页中绘制图形、文字、图片等。...2.初识画布 HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。因为 标签只是图形容器,所以必须使用脚本来绘制图形。...lineTo()方法用于定义从“x,y”的位置绘制一条直线到起点或上一个线头点。...context.lineTo(x,y); (5)路径 绘制直线确定了起始点和线头点后,便形成了一条绘制路径,但如果要绘制复杂路径,就必须要有路径的开始和结束。

2.3K20

Hype 4 Pro for Mac(HTML5动画制作软件) v4.1.12中文版

HTML5动画制作软件Hype 4 Pro推荐给你,不需要靠flash插件就可以进行H5的动画制作,并且极具灵活性,自动的为您创建关键帧、并且能制作各种不同的场景,还能使用各种动作在不同的场景中转换。...图片Hype 4 Pro for Mac(HTML5动画制作软件)HTML5动画制作软件Hype 4 Mac软件功能多边形可以轻松地将具有任意数量边的形状插入到文档中。...路径通常称为“笔工具”,“曲线”或“矢量”,路径是所有矢量形状的基础,并且可以包含由控制点操纵的多个直线或曲线段。所有预期的行上限,加入和填充规则都在这里。...铅笔工具您可以绘制一条线,而不是为路径定义单个点,它将自动平滑并转换为路径。我们建议将此工具与Astropad等平板电脑解决方案配对。形状变形自动将一个矢量形状设置为另一个矢量形状!

1.1K30

HTML5 Canvas开发详解(基础一)

Canvas概述 1.1 Canvas是什么 Canvas又称为“画布”,是HTML5的核心技术之一,通常说的Canvas技术,指的就是使用Canvas元素结合JavaScript来绘制各种图形的技术。...HTML5 Canvas暂时只提供2D绘图API,3D绘图可以使用HTML5中的WebGL进行开发。 3....直线图形 3.1 直线 3.1.1 Canvas坐标系 Canvas使用的坐标系是W3C坐标系。 数学坐标系:y轴正方向向上;W3C坐标系:y轴正方向向下。...3.1.2 一条直线 cxt.moveTo(x1, y1);//起点坐标 cxt.lineTo(x2, y2);//终点坐标 cxt.stroke();//画线 3.1.3 多条直线 cxt.moveTo...4.6 二次贝塞尔曲线 //(cx, cy)表示控制点的坐标 //(x2, y2)表示结束点的坐标 cxt.quadraticCurveTo(cx, cy, x2, y2); 绘制一条二次贝塞尔曲线也需要提供三个点的坐标

2.4K20
领券