Html5
文章平均质量分 76
mwsister
这个作者很懒,什么都没留下…
展开
-
[Canvas绘图] 第26节 生成表格
本节目标:(1) 绘制一张Python标准库模块索引表实现步骤:(1) 我有下面这样一堆字符串,我想把它们放到表格中"__future__", "__main__", "_dummy_thread", "_thread","abc", "aifc", "argparse", "array", "ast", "asynchat", "asyncore","atexit",原创 2015-12-13 11:53:02 · 2138 阅读 · 1 评论 -
[Canvas绘图] 第28节 分块治图
本节目标:(1) 我忽然间想到一个分区域读图取轮廓的方法,想了一夜,觉得要实现看看效果怎样。实现步骤:(1)首先确定了中心思想,对于一张图的轮廓,必然是像素变化比较剧烈的点,这个先前已经有了简易的判定。但是以疥是按行列扫描判定,这次我决定按区块扫描判定。按区块的目的是因为如果区块够小,可以把它当作一个单元来处理,于是我定义了这样一个结构:/*** @usage原创 2015-12-20 12:32:13 · 776 阅读 · 0 评论 -
[Canvas绘图] 第11节 四大美人
本节目标:(1) 用Canvas加载并显示图片(2) 实现获取轮廓点实现步骤:代码如下:/*** @usage 图片加载处理例* @author mw* @date 2015年12月03日 星期四 07:50:42 * @param* @return**/ function myplot() { plot.init(); se原创 2015-12-03 16:04:26 · 484 阅读 · 0 评论 -
[Canvas绘图] 第13节 线条勾勒
本节目标:(1) 对数据映射点阵进行线条勾勒处理实现步骤:我首先改进了一下Map类,增加了排序和打印函数,并且在加入元素时检查并保证坐标元素唯一。/*** @usage 映射类map* @author mw* @date 2015年11月28日 星期六 08:01:13 * @param* @return**/function Map(){原创 2015-12-05 13:37:13 · 465 阅读 · 0 评论 -
[Canvas绘图] 第12节 帅哥降临
本节目标:(1) 用贝塞尔曲线绘制肖像实现步骤:上一节使用了几张美女图片,有美女就必须要有帅哥,这就让我想为自己画张肖像,于是结果是这样的:这张肖像完全是依照我自己的样子来画的,大大的耳朵,明亮的眼睛,整齐秀丽的眉毛,略廋的脸颊,见图如见我。在这里就算和大家见过面了。这个图当然是用代码画的,代码如下,包装以后再做。/*** @usage 贝塞尔原创 2015-12-04 16:45:37 · 456 阅读 · 0 评论 -
[Canvas绘图] 第29节 葵花点穴
本节目标:(1) 精准读取点图(2) 从点图生成轮廓线(3) 判断目标点是否在轮廓线区域内实现步骤:我想实现能判断点的位置的功能,于是进行了以下的思考。假想我现在拿到了一张点图,比如是这样的:我并不知道这些点的坐标,只有这一张图,但这不妨碍我进行下一步,所以我读取并处理它,就像这样:虽然看上去是完全一样的方位,但其实是有一些小变化的,当然这些变化是可以通原创 2015-12-23 12:06:49 · 425 阅读 · 0 评论 -
[Canvas绘图] 第30节 沙场点兵
本节目标:(1) 整理这一个月以来产生的代码(2) 修改bug, 把函数封装成类实现步骤:(1) Map类的修改与功能测试//Map类的put(), print()功能测试function myDraw() { var map = new Map(); for (var i = -10; i < 10; i++) { map.put(i, i * i);原创 2016-01-07 11:03:20 · 959 阅读 · 0 评论 -
[Canvas绘图] 第14节 “路”在何方
本节目标:(1) 对数据映射点阵进行线条勾勒处理实现步骤:我在尝试有没有更好的处理方法勾勒出轮廓线条,于是想到了递归,如果根据原始映射图的点的关系,或许可以让程序自己找出合适的路径,但试了才发现递归的运算量相当巨大,完全会被卡死。所以最终形成了简化版,代码如下:/*** @usage 获取轮廓* @author mw* @date 2015年12月06日原创 2015-12-06 14:33:55 · 371 阅读 · 0 评论 -
[Canvas绘图] 第16节 路见不平
本节目标:(1) 对前几节获取轮廓和路径进行总结(2) 修正算法bug实现步骤:接上节,对于处理的效果我是不满意的,因为我发现即使画一个简单的矩形,也会算出来一大堆乱七八糟的路径,这可不行,于是我去检查算法,并反复思考,发现我在确定点是否在映射中这一步放水是一个错误,所以我把它改回了正确的形态:/*** @usage 判断坐标点是否在map中* @autho原创 2015-12-08 09:58:45 · 426 阅读 · 0 评论 -
[Canvas绘图] 第15节 逐“路”法则
本节目标:(1) 对前几节获取轮廓和路径进行总结实现步骤:续前节,根据前几节的试验,我得到了这样的一套流程:处理流程 >>1. getPicData取本地服务器下项目中1.jpg图,要求大小限制在300*400,这是为了便于比对,同时可以减小处理工作量。getPicData会打印出所有坐标点,把它拷贝为var $picDataArray。2. getSket原创 2015-12-07 12:18:03 · 449 阅读 · 0 评论 -
[Canvas绘图] 第10节 图片加载
本节目标:(1) 用Canvas加载并显示图片实现步骤:效果如图:代码如下:/*** @usage 图片加载处理例* @author mw* @date 2015年12月03日 星期四 07:50:42 * @param* @return**/ function myplot() { plot.init(); setPrefe原创 2015-12-03 12:55:45 · 542 阅读 · 0 评论 -
[Canvas绘图] 第09节 迷图档案
本节目标:(1) 封装图形档案类ShapeProfile类,用于存放常用及漂亮图形。(2) 实现图形顶点运算与绘制部分的分离。实现步骤:把图形顶点计算和绘制放在一块纠缠不清是一个糟糕的主意,所以我打算把它们分离出来,所以我封装了这个ShapeProfile类,专门计算坐标信息。/*** @usage 封装常用及精美图形* @author mw* @date原创 2015-12-02 12:52:38 · 475 阅读 · 0 评论 -
[Canvas绘图] 第01节 画布准备
本节目标:(1) 封装Canvas API(2) 画布分区(3) 简单图形绘制实现步骤:(1) 封装Canvas API//全局变量var plot = function() { //此处封装Canvas API}();//初始化环境 function setPreference() { plot.init() //颜原创 2015-11-27 08:02:42 · 1219 阅读 · 0 评论 -
[Canvas绘图] 第03节 “矩”重若轻
本节目标:(1) 封装Shape类(2) 利用矩形体会平移,旋转,缩放操作实现步骤:续前节,本节先准备封装一个形状类,加入绘制矩形的函数,其它的函数以后需要时补充。function Shape() { this.rect = function(x, y, w, h) { w = Math.abs(w); h = Math.abs(h); return pl原创 2015-11-29 10:25:08 · 392 阅读 · 0 评论 -
[Canvas绘图] 第02节 今日看“点"
本节目标:(1) 封装map类(2) 绘制坐标系(3) 简单函数绘制实现步骤:续前节,有了画布,就想要画一些东西,就从最简单的“点”开始吧。点是和函数关系在一起的,怎样画出漂亮的函数图形呢?在画出函数以前,我先想到了一个问题,怎样查看函数上各个点的坐标值?今天就从这里开始。我第一步,建立了一个Html表,用于显示数值,设计得非常简单。这个表通过一个函数给原创 2015-11-28 15:10:13 · 487 阅读 · 0 评论 -
[Canvas绘图] 第04节 多边家族
本节目标:(1) 查看各种参数下的图形效果实现步骤:续前节,本节我想看看各种多边形怎样画,于是代码写成 var row = 3; var col = 3; for (var m = 1; m <= row; m++) { for (var n = 1; n <= col; n++) { setSector(row,col,m,n);原创 2015-11-29 14:14:54 · 658 阅读 · 0 评论 -
[Canvas绘图] 第06节 车轮滚滚
本节目标:(1) 查看各种参数下的图形效果实现步骤:续前节,这一次我让上一节的火柴棍子变成矩形,沿用上一节的代码,看看能得出哪些不一样的图形。上面这张图在上一节对应的那张标注出了错,两个平移都是r/2,上一节错写成了-r/2。最后这两张图初看起来是一样的,但注意圆心处的孔洞,可以看出区别,到这里,就很像精美的车轮了。从原创 2015-11-30 16:16:26 · 756 阅读 · 0 评论 -
[Canvas绘图] 第05节 火柴天堂
本节目标:(1) 查看各种参数下的图形效果实现步骤:续前节,我想研究一下这段代码能给我生成出多少图案。/*** @usage 星形系列图形* @author mw* @date 2015年11月30日 星期一 13:12:53 * @param* @return**/ function myplot() { plot.init();原创 2015-11-30 13:45:52 · 493 阅读 · 0 评论 -
[Canvas绘图] 第27节 三维初探
本节目标:(1) 绘制椭圆(2) 绘制简单三维图形实现步骤:采用贝氏曲线绘制椭圆 //绘制椭圆 function BezierEllipse1(x, y, a, b, rotate) { //关键是bezierCurveTo中两个控制点的设置 //0.5和0.6是两个关键系数(在本函数中为试验而得) var ox = 0.5 * a, oy原创 2015-12-17 14:55:45 · 3142 阅读 · 2 评论 -
[Canvas绘图] 第07节 “星“心相映
本节目标:(1) 绘制空心星形实现步骤:续前节,本节我想要绘制一些空心的星形。本来我想用点的递推法来绘制,这样就先封装了正多边形的绘制函数。/*** @usage 以顶点递推方式绘制正多边形* @author mw* @date 2015年12月01日 星期二 09:42:33 * @param (x, y)图形中心坐标,r 外接圆半径 edge 边原创 2015-12-01 11:39:02 · 398 阅读 · 0 评论 -
[Canvas绘图] 第08节 "8"解九妹
本节目标:(1) 绘制数字实现步骤:电子数字中笔画最多的是"8"字,把它绘制出来后,其它九个数字可以通过减笔画快速生成,包装一个Digit类./*** @usage 数字形状* @author mw* @date 2015年12月01日 星期二 15:57:45 * @param* @return**/ function Digit() {原创 2015-12-01 16:39:56 · 429 阅读 · 0 评论 -
[Canvas绘图] 第31节 连通实验
本节目标:通过对点阵的连通分析,看是否能达到有效分割多边形的目标。实现步骤:我这次主要是想看看一个多边形要怎样才能被不重不漏的分成若干个三角形,但这个目标不知道能不能实现。为了测试,先写了以下代码://解决某个特定问题function problemSolve(pointArray) { //传入点阵列pointArray //格式为[[px1, py原创 2016-03-29 09:23:00 · 386 阅读 · 0 评论