利用canvas实现的中点Bresenham算法

Bresenham提出的直线生成算法的基本原理是,每次在最大位移方向上走一步,而另一个方向是走步还是不走步取决于误差项的判别,具体的实现过程大家可以去问度娘.我主要是利用canvas画布技术实现了这个过程,算法可能还是有点小问题,欢迎大家给我留言建议,一定虚心接受. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中…

《图形学》实验七：中点Bresenham算法画椭圆

开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画椭圆. 实验结果: 代码: #include <gl/glut.h> #define WIDTH 500 #define HEIGHT 500 #define OFFSET 15 //偏移量,偏移到原点 #define A 6 #define B 5 void Init() //其它初始化 { glClearColor(1.0f,1.0f,1.0f,1.0f); //设置背景颜色,完全不透明 glColor3…

《图形学》实验六：中点Bresenham算法画圆

开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画圆. 实验结果: 代码: #include <gl/glut.h> #define WIDTH 500 #define HEIGHT 500 #define OFFSET 15 #define R 8 void Init() //其它初始化 { glClearColor(1.0f,1.0f,1.0f,1.0f); //设置背景颜色,完全不透明 glColor3f(1.0f,0.0f,0.0f); //设置画笔…

《图形学》实验四：中点Bresenham算法画直线

开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画直线. 实验结果: 代码: //中点Bresenham算法生成直线 #include <gl/glut.h> #include <math.h> #define WIDTH 500 //窗口宽度 #define HEIGHT 500 //窗口高度 #define DRAWLINE1 MidpointBresenham(100,200,200,100); //画直线 #define DRAWLINE…

Python使用DDA算法和中点Bresenham算法画直线

title: "Python使用DDA算法和中点Bresenham算法画直线" date: 2018-06-11T19:28:02+08:00 tags: ["图形学"] categories: ["Python"] 先上效果图代码 #!/usr/bin/env python # coding=utf-8 from pylab import * from matplotlib.ticker import MultipleLocator impo…

[DEBUG]椭圆的中点Bresenham算法边缘绘制出现错误

在使用椭圆的中点Bresenham算法绘制椭圆时, 当椭圆足够大时, 椭圆的边缘会出现下面这种情况. 出错原因: 将a, b声明为了int类型, 导致中点判别式中发生溢出关注后面的a*b*a*b当a == 280, b == 182时, a*b*a*b约等于2.6*10^9int的表示范围如下(注意最大的正int是这个范围的一半) 于是最大的int型整数小于2.6*10^9, 溢出, 所以边缘出现变形解决办法:将a, b声明为long long型(对于1920*1080的屏幕, 此时一定不会…

《图形学》实验五：改进的Bresenham算法画直线

开发环境: VC++6.0,OpenGL 实验内容: 使用改进的Bresenham算法画直线. 实验结果: 代码: //中点Bresenham算法生成直线 #include <gl/glut.h> #include <math.h> #define WIDTH 500 //窗口宽度 #define HEIGHT 500 //窗口高度 #define DRAWLINE ProBresenham(100,100,400,400); //画直线 #pragma comment(linke…

直线的中点Bresenham算法的实现

一.实验目的 1.掌握在MFC中搭建图形绘制的基本框架的方法: 2.将直线的中点Bresenham算法转化成可执行代码. 二.实验内容 1. 通过分析具体数据在中点Bresenham算法上的执行过程,绘制算法执行流程图或N-S图,在MFC中实现该算法,要求编写函数实现任意给定两点绘制线段. 三.实验步骤任意给定的两点所绘制的线段斜率k可能有四种情况,分别是:0<k<1,k>=1,-1<k<0, k<=-1.下面对这四种情况分别进行分析. (一) 当0<k<…

Bresenham算法画填充圆及SDL代码实现

画圆是计算机图形操作中一个非常重要的需求.普通的画圆算法需要大量的浮点数参与运算,而众所周知,浮点数的运算速度远低于整形数.而最终屏幕上影射的像素的坐标均为整形,不可能是连续的线,所以浮点数运算其实纯属浪费.下面介绍的Bresenham算法就是根据上文的原理设计.该算法原应用于直线的绘制,但由于圆的八分对称性,该算法也适用与圆(曲线图形)的绘制. 该算法主要是这样的原理:找出一个1/8的圆弧,用快速的增量计算找出下一个点.同时利用圆的八分对称性,找出8个点(包括该点),进行绘制. 这里给出示例的…

基于Bresenham算法画圆

bresenham算法画圆思想与上篇 bresenham算法画线段思想是一致的画圆x^2+y^2=R^2 将他分为8个部分,如上图 1. 只要画出1中1/8圆的圆周,剩下的就可以通过对称关系画出这个圆 X变化从0->R 那为什么不采用从-R->R呢, Y=+-sqrt(R^2-x^2); dy/dx=-x/(sqrt(R^2-x^2)) =-x/y 所以采用从-R到R,每次横坐标增1,计算量大,而且在(x=+-R,y=0)处,x的很小变化就引起了y的很大变化. 所以不是采用x从-R---&…

ROS导航之地图costmap_2d与bresenham算法

读者可以参读http://wiki.ros.org/costmap_2d costmap_2d: 无论是激光雷达还是如kinect 或xtion pro深度相机作为传感器跑出的2D或3D SLAM地图,都不能直接用于实际的导航,必须将地图转化为costmap(代价地图),ROS的costmap通常采用grid(网格)形式.以前一直没有搞明白每个栅格的概率是如何算出来的,原因是之前一直忽略了内存的存储结构,栅格地图一个栅格占1个字节,也就是八位,可以存0-255中数据,也就是每个cell co…

[计算机图形学]光栅化算法：DDA和Bresenham算法

目录一.DDA 二.Bresenham 三.绘制图形 1. 绘制直线 2. 绘制圆 3. 绘制椭圆一.DDA DDA算法是最简单的直线绘制算法.主要思想是利用直线的斜截式:\(y=kx+b\) 对于一条直线的绘制,往往会给定两个端点:\(P_A = (0,0)\)和\(P_B = (60,60)\) 然后调用函数:OLED_DrawLine(0, 0, 60, 60); 首先,我们来看一下绘制直线都可以用哪些方法. 确定了两个端点,那么两个端点之间的点如何确定? 第一个可以想到:知道了两个点…

利用 canvas 破解某拖动验证码

利用 canvas 破解某拖动验证码 http://my.oschina.net/u/237940/blog/337194…

利用Canvas进行绘制XY坐标系

首先来一发图绘制XY的坐标主要是利用Canvas setLeft和setBottom功能(Canvas内置坐标的功能) 1.首先WPF中的坐标系都是从左到右,从上到下的即左上角位置(0,0)点,所以XY的Canvas要以(RenderTransformOrigin="0,0",为中心点)进行270°旋转,然后平移<TranslateTransform Y="{Binding ActualHeight,ElementName=canvasInPath}"/&…

通过Bresenham算法实现完成矢量线性多边形向栅格数据的转化

1.实验目的与要求目的:通过本次实验,完成矢量线性多边形向栅格数据的转化过程: 要求:采用VC++6.0实现. 2.实验方法采用Bresenham算法实现 3.实验材料直线的定义:y = x/3, 起点为(0, 0),终点为(12, 4); 网格坐标要求:网格分辨率为0.2,网格起点同直角坐标系原点相同 4.实验结果程序运行的结果,要依次输出栅格单元的栅格坐标注意事项:本实验中,栅格的分辨率同实际坐标不等,注意格子单位的输出过程以及矢量坐标向格子坐标的转化. 5.程序源代码 //采用B…

bresenham算法的FPGA的实现2

在上一篇里http://www.cnblogs.com/sepeng/p/4045593.html <bresenham算法的FPGA的实现1>已经做了一个整体框架的布局,但是那个程序只是支持|k|<1.要想全屏支持,就还需要对这个程序做修改,觉得自己的修改方式很繁琐,期望大家的指点,有高质量的code出现.算法的原理部分在上一篇中已经给出 /* date:2014/10/23 version : QuartusII + de1-soc cyclone V designer : peng…

bresenham算法的FPGA的实现1

接着上一篇的计算实现给出屏幕上任意两个点,求出这两个点之间直线上的所有的点.http://www.cnblogs.com/sepeng/p/4042464.html 这种直接算法的确是被鄙视了强大的度娘告诉我们还有专用的算法叫bresenham算法.调用我大脑中所有的数学知识残留借用网上资料,费尽了吃奶的力气才把这个算法推导了一遍,高手们不要笑话后来觉得这个时候讨论的是 0<k<1.那么把pi换一换就是 -1<k<0.仿真后发现自己又脑残了一次,对算法知之甚少,组合了好几次都…

利用canvas压缩图片

现在手机拍的照片动不动就是几M,当用户上传手机里的照片时一个消耗流量大,一个上传时间长,为了解决这个问题,就需要压缩图片: 想法:利用canvas重绘图片,保持宽高比不变,具体宽高根本具体情况而定. 代码 : html: <input type="file" id="upload" /> <p>压缩前:</p> <img id="oldImg" src=""/> <p>…

HTML5利用canvas，把多张图合并成一张图片

需求分析,根据当前网页中的几张图片,在手机上长按,保存图片到相册或者发送给好友. drawCanvas(){ var self = this; var imgsrcArray = [ require('@/page/agent/agentexpand/img/bg.jpg'), 'data:image/jpeg;base64,'+this.codeUrl ]; var canvas = document.createElement('canvas'); var ctx = canvas.getC…

计算机图形学（第2版于万波于硕编著）第45页的Bresenham算法有错误

计算机图形学(第2版于万波于硕编著)第45页的Bresenham算法有错误: 书上本来要写的是以x为阶越步长的方法,但是他写的是用一部分y为阶越步长的方法(其实也写的不对),最后以x为阶越步长的方法总结. 分析书上的算法得: l K初始值<=0 画出的是 x=0; l 0<K初始值<1 画出的是 1/k的直线; l K初始值>=1 画出的是 y=x; 以下黑色的线是使用MoveTo,Lineto画出的,红色的是书上的程序画出的,蓝色的线是我修改后的直线(有除法),…

C# 实现Bresenham算法（vs2010）

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Linq; using System.Text; using System.Windows.Forms; using System.Drawing; using System.Drawing.Drawing2D; namespace Bresenham { public parti…

利用canvas将网页元素生成图片并保存在本地

利用canvas将网页元素生成图片并保存在本地首先引入三个文件: 1.<script type="text/javascript" src="js/html2canvas.js"></script> 2.<script type="text/javascript" src="js/base64.js"></script> 3.<script type="text…

利用canvas对上传图片进行上传前压缩

利用谷歌调式工具发现,图片大小直接影响着首屏加载时间. 且考虑到后期服务端压力,图片压缩特别必要. 本文是前端利用canvas实现图片.参考文章:https://www.cnblogs.com/007sx/p/7583202.html 本文将其改为插件形式,适合单文件压缩,多文件可以采用生成多个二进制文件的方法,然后一并上传.具体后面研究. 说说原理,压缩涉及三个关键点: 1,一个图片前端可被加载,基于file:协议的路径是不能产生onload事件,所以需要借助浏览器的接口将图片转为可加载文件,…

10分钟，利用canvas画一个小的loading界面

首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" style="border: 1px solid #808080;display: block;margin: 100px auto;>你的游览器不支持canvas</canvas> 这里主要要说的就是宽高,不要在style里面定义,不然会被拉伸.(对于这点,建议大家看下W3c文档,不是很…

利用canvas和RGraph作图

利用canvas可以直接在页面中绘制各种复杂的图形,其中引用到一个Rgraph的插件. Rgraph插件使用非常方便,只需几步就可以完成一个折线图.饼图.柱状图,或是其中两者图形的结合! (1) 引用RGraph.common.core.js这个脚本文件,这个是插件的核心脚本,必须引用,否则不可用.但是在测试时,发现有时会报错,没用引用jQuery的插件,所以报错时,需引用这个jquery-1.4.1.js的这个脚本文件: (2) 需根据业务需用绘制的图形引用对应的脚本文件. 例如绘制柱状图需引…