canvas
关注
分享
扫一扫
IT1995
每周个人笔记分享，欢迎广大网友查阅！
展开
-
Web前端笔记-画布拖动及放缩（two.js）
程序运行截图如下：结构图如下：关键代码如下：界面调用HelloWorld.vue<template> <div> <div id="draw-shapes"></div> </div></template><script> import "JS/two" import "JS/zui"; import {demo1} from "JS/test1"; e原创 2020-07-02 22:28:03 · 1786 阅读 · 0 评论 -
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: 5原创 2020-06-10 18:04:17 · 977 阅读 · 0 评论 -
canvas笔记-文本（fillText）旋转（rotate）
这里fillText直接使用rotate会有问题。估计是旋转中心有问题。正确的逻辑为：先使用translate移动中心点在文本起始位置，如何在0，0处fillText即可。如果要在字符串中心进行旋转，则需要获取字符串长度，translate的时候x进行+，y轴进行-即可。程序运行截图如下：绿色的为原始字符串，红色是从顶部进行旋转，绿色为在中心进行旋转。代码如下：<!DOCTYPE html><html lang="en"><...原创 2020-06-08 15:51:21 · 7067 阅读 · 1 评论 -
canvas笔记-canvas加载图片及放缩及加水印(两canvas同时使用)
首先是图片放缩程序运行截图如下：拉动滑动条：源码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body style="background: black"><canvas id="canvas" style="bord原创 2020-06-04 19:39:39 · 1104 阅读 · 0 评论 -
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 · 1638 阅读 · 0 评论 -
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 · 1432 阅读 · 0 评论 -
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 · 3378 阅读 · 0 评论 -
canvas笔记-非零环绕原则及剪纸实例
首先提下非零环绕原则，如下图：这里如上面的图，这个非零环绕和画图的方向有关！如+1要染色的地方，在这里找一个点射向外边，如果相交的地方画图方向和射线方向一样就是+1，要染色。+2那个地方，也是那样。0为不染色，因为一个+1一个-1，只要不是0就要染色，这就是非零环绕原则。下面给出两个实例程序运行截图如下：源码如下：<!DOCTYPE html><html lang="en"><head> <meta cha.原创 2020-06-03 10:38:57 · 863 阅读 · 1 评论 -
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 · 2867 阅读 · 0 评论 -
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;">原创 2020-06-03 09:16:13 · 1296 阅读 · 0 评论 -
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 · 899 阅读 · 0 评论