4 IT1995

尚未进行身份认证

我要认证

睡了。梦里面什么都有!

等级
TA的排名 20

Nginx笔记-反向代理中配置WebSocket及设置超时

这里贴下配置:...server{ listen 8888; server_name MyWeb; location / { proxy_pass http://xxx.xx.xx.xxx:xxxx; } location /draw { proxy_pass http://xxx.xxx.xxx.xxx:xxxx/; proxy_set_header Upgrade $http_upgrad

2020-06-04 16:02:37

canvas笔记-canvas中用户与图形交互

运行截图如下:点击某个圆后:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas id="canvas" style="border: 1px solid #aaa; display: block;

2020-06-03 14:29:00

canvas笔记-扩展canvas的context及画椭圆及浏览器兼容问题

首先是扩展canvas的context比如扩展一个画五角星的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas id="canvas" style="border: 1px solid #aaa; display:

2020-06-03 13:57:00

canvas笔记-在canvas中使用其他HTML元素

这里使用的原理是使用css把div中关于html的元素通过布局位置,以及透明相关的设置,将其设置到canvas上,这样看起来就是在canvas绘制的按钮。然后使用JavaScript获取按钮的数据或者其他数据设置到canvas中。程序运行截图如下:点击控制面板的按钮再点击一个源码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> .

2020-06-03 11:24:39

canvas笔记-非零环绕原则及剪纸实例

首先提下非零环绕原则,如下图:这里如上面的图,这个非零环绕和画图的方向有关!如+1要染色的地方,在这里找一个点射向外边,如果相交的地方画图方向和射线方向一样就是+1,要染色。+2那个地方,也是那样。0为不染色,因为一个+1一个-1,只要不是0就要染色,这就是非零环绕原则。下面给出两个实例程序运行截图如下:源码如下:<!DOCTYPE html><html lang="en"><head> <meta cha.

2020-06-03 10:38:57

canvas笔记-clip裁剪函数的使用及探照灯实例

在canvas中有clip函数,也就是裁剪,从原始画布中剪切任意形状和尺寸。如下例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas id="canvas" style="border: 1px solid #.

2020-06-03 10:12:41

canvas笔记-globalAlpha和globaleCompositeOperation的使用

如下代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;"&gt

2020-06-03 09:16:13

canvas笔记-阴影的使用

关于阴影有如下的几个属性context.shadowOffsetXcontext.shadowOffsetYcontext.shadowBlur其中blur的英文解释为模糊不清的,在canvas中填写一个数值即可如下例子程序运行截图如下:源码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tit.

2020-06-03 08:50:11

Python笔记-flask执行后台程序(非web应用)

这里主要是想写一个爬虫,因为SQLAlchemy和Manager管理项目比较爽,在此记录下。程序结构如下关键源码如下:application.pyfrom flask import Flaskfrom flask_script import Managerfrom flask_sqlalchemy import SQLAlchemyapp = Flask(__name__)manager = Manager( app )app.config['SQLALCHEMY_DATA

2020-06-02 20:03:36

canvas笔记-文本水平垂直对齐与度量

在canvas中通过textAlign可以设置文本的对齐:其中left为左对齐,center为居中对齐,right为右对齐。程序运行截图如下:源码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas id

2020-06-02 11:41:23

canvas笔记-文字渲染

字体以及填充文字程序运行截图如下:源码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas id="canvas" style="border: 1px solid #aaa; display: block;

2020-06-02 11:14:21

canvas笔记-二次贝塞尔曲线与三次贝塞尔曲线的用法

此博文不研究其算法,只记录下其用法。首先是二次贝塞尔曲线!函数是这样的quadraticCurveTo(cpx,cpy,x,y);其中cpx为贝塞尔控制点x;其中cpy为贝塞尔控制点y;其中x为结束点x坐标;其中y为结束点y坐标。这里隐藏了一个开始点,一般用beginPath()和moveTo方法来定义开始点:源码如下:<!DOCTYPE html><html lang="en"><head> &...

2020-06-02 10:47:36

canvas笔记-arcTo的使用及绘制弯月

首先介绍下这个函数context.arcTo(x1,y1,x2,y2,r);其中x1为弧的起点x坐标;其中y1为弧的起点y坐标;其中x2为弧的终点x坐标;其中y2为弧的终点y坐标;其中r为弧的半径。程序运行截图如下:源码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&l...

2020-06-02 10:14:06

canvas笔记-使用arc与lineTo画圆角矩形及绘制2048棋盘

首先是使用arc圆所对应的参数为(默认为顺时针):这里话矩形的话,对应的圆心顶点坐标为:程序运行截图如下:源码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas id="canvas" styl

2020-06-02 09:32:22

canvas笔记-设置底纹(createPattern相关)

createPattern(img,repeat-style)函数中第二个参数可以填写4个值,分别为:repeat-style:no-repeat、repeat-x、repeat-y、repeat如下模板代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head&...

2020-06-01 11:40:01

canvas笔记-线性渐变与非线性渐变

首先来看下线性渐变//第一步let grd = context.createLinearGradient(xstart, ystart, xend, yend); //第二步Grd.addColorStop(stop, color);程序运行截图如下:源码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g.

2020-06-01 11:01:45

canvas笔记-图形变换(位移translate、缩放scale、变换矩阵transform)

这里首先演示下位移,这里使用的函数是translate(x,y)这个函数是叠加的,也就是说,当translate(100,100),后再次调用translate(200,200),那么最后圆点的基准值就为translate(300,300)。也就是说如果要实现某个图形的位移后,还要变回来。代码如下:translate(100, 100);//TODO ... ...translate(-100, -100);或者使用如下的方式:save(); //保存当前图形状态Res...

2020-06-01 09:49:10

canvas笔记-画一片星空

程序运行截图如下:源码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px a

2020-05-31 19:06:39

canvas笔记-lineJoin和miterLimit的使用

lineJoin是线条与线条连接时的效果lineJoin有如下参数miter(default)bevelround下面对各个参数进行展示!默认情况下:源码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>&

2020-05-31 16:52:31

canvas笔记-画一个五角星(含算法)

算法如下:上面的图是正三角形:说下算法,关于上面那些x,y是怎么算出来的。这里大圆的5个顶点,每个顶点占用的角度为360/5 = 72度,左边那个18度是通过90 - 72 = 18度。大圆半径为R,所以x为cos(18度) * Ry为-sin(18度) * R这个负是因为坐标y,是因为向下为正。其他角度通过加72度就可以了!下面来看下那个54度是怎么算的!72 * 2 - 90 = 54度,同样半径为rx为cos(54度) * ry为-sin(54.

2020-05-31 15:34:53

查看更多

勋章 我的勋章
  • GitHub
    GitHub
    绑定GitHub第三方账户获取
  • 签到王者
    签到王者
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 技术圈认证
    技术圈认证
    用户完成年度认证,即可获得
  • 新人勋章
    新人勋章
    用户发布第一条blink获赞超过3个即可获得
  • 专栏达人
    专栏达人
    授予成功创建个人博客专栏的用户。专栏中添加五篇以上博文即可点亮!撰写博客专栏浓缩技术精华,专栏达人就是你!
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 1024勋章
    1024勋章
    #1024程序员节#活动勋章,当日发布原创博客即可获得
  • 1024超级勋章
    1024超级勋章
    授予原创文章总数达到1024篇的博主,感谢你对CSDN社区的贡献,CSDN与你一起成长。
  • 勤写标兵Lv4
    勤写标兵Lv4
    授予每个自然周发布9篇以上(包括9篇)原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 学习力
    学习力
    《原力计划【第二季】》第一期主题勋章 ,第一期活动已经结束啦,小伙伴们可以去参加第二期打卡挑战活动获取更多勋章哦。
  • 原力新人
    原力新人
    在《原力计划【第二季】》打卡挑战活动中,成功参与本活动并发布一篇原创文章的博主,即可获得此勋章。
  • 原力探索 · S
    原力探索 · S
    在《原力计划【第二季】》打卡挑战活动中,发布 12 篇原创文章参与活动的博主,即可获得此勋章。(本次活动结束后统一统计发放)
  • 原力突破 · S
    原力突破 · S
    在《原力计划【第二季】》打卡挑战活动中,有 5 篇参与活动的文章点赞 or 收藏 or 评论大于 50 的博主,即可获得此勋章。(本次活动结束后统一统计发放)
  • 分享王者
    分享王者
    成功上传51个资源即可获取