canvas
关注
分享
扫一扫
文章平均质量分 50
介绍及使用canvas
风舞红枫
被磨平棱角的前端小伙
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
canvas绘制红绿灯路口（二）
一：加入人行道红绿信号二：加入专用车道标识（无方向标识时采用专用车道标识）三：东南西北四项路口优化绘制逻辑，美化图像四：加入拖拽、缩放图例原创 2024-06-20 16:14:35 · 954 阅读 · 0 评论 -
canvas绘制红绿灯路口（一）
canvas绘制红绿灯路口原创 2023-12-29 11:40:16 · 1301 阅读 · 0 评论 -
canvas力导布局
【代码】canvas力导布局。原创 2023-10-10 20:31:15 · 1038 阅读 · 0 评论 -
移动端折线、曲线图表封装
折线、曲线图表封装原创 2022-01-07 20:42:45 · 1020 阅读 · 1 评论 -
canvas实现撒花效果
撒花类原创 2021-06-22 14:35:37 · 1281 阅读 · 0 评论 -
canvas实现图片旋转，数据回传
效果图如下主要代码canvas<canvas></canvas><br/>img<img src="../img/no-data-new.png" alt=""><br/>生成的img<img src="" alt="" id="fwhf">let img = document.getElementsByTagName('img')[0];let canvas = document.getElementsBy原创 2021-05-26 15:49:34 · 316 阅读 · 0 评论 -
webSocket+ws包+canvas实现简陋版球球大作战
server.jsvar express = require('express');var WebSocket = require('ws');var app = express();app.use(express.static('./'));var webS = new WebSocket.Server({host:'10.9.22.171',port:8080},()=>{ console.log('success')});var clients = [];var user原创 2021-03-05 09:46:21 · 323 阅读 · 2 评论 -
canvas绘制爱心
canvas绘制爱心原创 2021-03-05 09:37:00 · 2184 阅读 · 3 评论 -
canvas图片滤镜
无图不欢，先上图<!DOCTYPE html><html><head> <meta name="keywords" content="风舞红枫,前端技术,canvas"/> <meta name="description" content="风舞红枫,前端技术,canvas,vue,react,node,个人博客"/> <meta charset="utf-8"> <title>图片滤镜</title&原创 2021-03-05 09:33:04 · 329 阅读 · 2 评论 -
canvas绘制刮刮卡
canvas绘制刮刮卡原创 2021-03-05 09:29:53 · 417 阅读 · 4 评论 -
canvas绘制星空（起手篇）
canvas绘制星空（起手篇）原创 2021-03-05 09:25:41 · 1101 阅读 · 3 评论 -
canvas绘制倒计时
canvas绘制倒计时原创 2021-03-05 09:18:38 · 580 阅读 · 2 评论 -
canvas绘制画板
无图不欢，先上图<!DOCTYPE html><html><head> <meta name="keywords" content="风舞红枫,前端技术,canvas"/> <meta name="description" content="风舞红枫,前端技术,canvas,vue,react,node,个人博客"/> <meta charset="utf-8"> <link rel="icon" href="..原创 2021-03-05 09:17:24 · 374 阅读 · 2 评论 -
canvas绘制聚光灯
canvas绘制聚光灯原创 2021-03-05 09:16:32 · 442 阅读 · 2 评论 -
canvas绘制探光灯
canvas绘制探光灯原创 2021-03-05 09:19:51 · 251 阅读 · 2 评论 -
canvas实战之酷炫背景动画（七）
canvas炫酷背景动画之最终版<script type="text/javascript">class FwhfPointLine{ constructor(pointNum,pointR,pointColor,pointSpeed,lineMaxLength,lineColor,eMaxLength,eSpeed){ this.pointNum = pointNum || 66; this.pointR = pointR || [0.5,0.7]; this.pointCo原创 2021-03-04 15:04:28 · 728 阅读 · 1 评论 -
canvas实战之酷炫背景动画（六）
最后为圆点添加一些小动画。不过似乎有些偏离了原本的样子…(低调低调)<script type="text/javascript">class FwhfPointLine{ constructor(pointNum,pointR,pointColor,pointSpeed,lineMaxLength,lineColor,eMaxLength,eState,eSpeed,animation){ this.pointNum = pointNum || 99; this.pointR =原创 2021-03-04 15:03:16 · 286 阅读 · 1 评论 -
canvas实战之酷炫背景动画（五）
接下来添加鼠标移动时间。 当鼠标与圆点距离达到固定距离1时，圆点会被瞬间吸到距离鼠标的另一个固定距离2(可视为出现线条的最大距离)，然后继续向当前鼠标与圆点方向运动到鼠标的另一边。 当鼠标快速移动使鼠标与圆点距离大于固定距离1时，圆点脱离。<script type="text/javascript">class FwhfPointLine{ constructor(pointNum,pointR,pointColor,pointSpeed,lineMaxLength,lineColor,e原创 2021-03-04 15:02:28 · 325 阅读 · 1 评论 -
canvas实战之酷炫背景动画（四）
既然上一节出现了绘制两次直线以及连接处不在圆点处的bug是由于两次for嵌套后造成二次直线绘制时坐标发生了变化所产生的结果。那我们就将绘制直线提出来，等待圆点绘制完成后再去实现直线的绘制来解决圆点与直线错位问题。而二次绘制的情况是由于for嵌套后点1到点2,点2到点1绘制了两次，所以我们可以选择只绘制第一次或则第二次实现原理for(var i = 0 ; i < x ; i++){ for(var j = 0 ; j < i-1 ; j++){ 在这里进行绘制即可实现只有一次绘制原创 2021-03-04 15:01:42 · 502 阅读 · 1 评论 -
canvas实战之酷炫背景动画（三）
接着上一节，实现原点绘制及运动后实现线条的绘制，观察博客背景效果可以很明显的发现当两点距离小于某个定值时才会绘制，而且有透明度变化。按照正常的思路，应当是在绘制点的循环中顺便判断两点间的距离是否小于某一个值。ok,下面时代码实现。ok,接下来就是实现给点添加颜色。并让点动起来。需求数据格式[ [x1,y1,r1,colorIndex1,speedX1,speedY1], [x2.y2,r2,colorIndex2,speedX2,speedY2], .... [xn,yn,rn,color原创 2021-03-04 15:00:24 · 1804 阅读 · 4 评论 -
canvas实战之酷炫背景动画（二）
hello，今天赶了一天的路，刚刚闲停下来，本节带着大家梳理一下上一节的实现思路首先分析博客背景效果，其中无非就是点与线，再加了一些运动效果，所以我们自然要从点入手，无点何以有线。再分析每次刷新界面时点的位置是随机的，个数也应当是用户所设定的,点的大小应该也由用户设定。所以我们应该随机到一个这样的数据格式[ [x1,y1,r1], [x2.y2,r2], .... [xn,yn,rn]]或者json格式的数据也可以，个人习惯了二维数组。下面就是根据现有分析编写的代码<scrip原创 2021-03-04 14:59:00 · 1502 阅读 · 1 评论 -
canvas实战之酷炫背景动画（一）
canvas绘制酷炫背景动画原创 2021-03-04 14:57:05 · 2372 阅读 · 2 评论 -
小程序canvas组件bindlongtap不好使?
要开发背景图+字,第一时间想到了canvas,然后遇到了一系列奇葩问题…首先用canvas成功合成了图片，然后要实现一个长按弹框的功能，然后翻canvas文档刚好看到了一个长按函数bindlongtap,真是天助我也…,然而<canvas class="myCard" canvas-id="myCard{{index}}" bindlongtap="longTap" wx:for="{{cardList}}" data-index="{{index}}" wx:key="{{index}}"&g原创 2021-02-28 14:28:14 · 716 阅读 · 1 评论 -
小程序loding动画组件封装及源码
效果图如下 使用方法示例wxml<progress percentage="{{percentage}}" wx:if="{{lodingType != ''}}" lodingType="{{lodingType}}" bindfwhfLoding="hideFwhfLoding" speed="{{speed}}"/><button bindt原创 2021-02-28 14:21:35 · 350 阅读 · 0 评论 -
canvas渲染模式
canvas有三种渲染模式可供选择，分别是Overlay,Camera,World其中Overlay为覆盖模式，即永远最后渲染，覆盖其他物体和UI。Camera为相机模式，渲染顺序依据相机。World为世界模式，并不因相机而改变，至于距离有关。实际工程中，我们会运用多个canvas，那么各种模式下渲染顺序又是如何？第一种情况，当有多个canvas并且渲染模式都为Overlay。这种情况下，渲染顺序是由canvas组件下的Sort Order决定的，值越大的越后渲染。第二种情况，当有多个canvas原创 2021-02-24 14:37:35 · 1629 阅读 · 0 评论 -
使用canvas绘制六边形
近期遇到了一个六边形边框的需求，实现如下图效果：有六边形边框，中间是一张图片，图片超出的部分要裁切掉。代码实现如下：<html> <head> <style> html,body{ width:100%; height:100%; padding:0; margin:0; } canvas{ position: absolute; top:0; left:0; right:0;原创 2020-12-01 15:59:49 · 1915 阅读 · 0 评论 -
转盘插件turntable-canvas
turntable-canvas演示地址：Go演示turntable-canvas仓库地址：Go仓库turntable-canvas-demo源码地址：Go源码效果图：另附：小程序转盘仓库地址：Go小程序仓库小程序转盘代码片段：Go代码片段小程序转盘npm下载：npm i wx-turntable-canvas...原创 2020-04-11 15:18:03 · 720 阅读 · 1 评论 -
小程序新版canvas绘制大转盘（可配置）
效果图wxml<view class="turntable"> <canvas type="2d" style="transform:{{'rotate(' + rotate + 'deg)'}};width: 600rpx;height: 600rpx" class="turntableCanvas" id='turntable'></canvas>...原创 2020-03-30 14:18:36 · 1919 阅读 · 0 评论 -
canvas绘制大转盘
canvas绘制大转盘原创 2019-05-23 15:31:46 · 1801 阅读 · 2 评论 -
canvas入门（二）标签width与style:width的区别
canvas标签的宽高与style设置的宽高的区别，以及如何绘制更精确的canvas图形原创 2019-03-26 22:11:59 · 1068 阅读 · 0 评论 -
canvas入门（三）绘制代码分块
hello,继续我们的canvas之旅,首先我们来绘制一条从(60,60)到(60,160)的一条绿色的width为6的直线<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>demo</title></head><body&g...原创 2019-03-26 22:16:31 · 436 阅读 · 0 评论 -
canvas入门（四）绘制线的扩展api
在开始新的一节之前我们先来复习回顾上一节的遗留问题<script type="text/javascript">window.onload = function(){ var canvas = document.getElementsByTagName('canvas')[0]; var context = canvas.getContext("2d"); contex...原创 2019-03-26 22:18:48 · 314 阅读 · 0 评论 -
canvas入门（五）贝塞尔曲线
这一节主要给大家分享两个曲线————二次贝塞尔曲线和三次贝塞尔曲线二次贝塞尔曲线示例<script type="text/javascript">window.onload = function(){ var canvas = document.getElementsByTagName('canvas')[0]; var context = canvas.getConte...原创 2019-03-26 22:21:33 · 429 阅读 · 0 评论 -
canvas入门（六）旋转、偏移、缩放
欢迎查看canvas第七节内容,本节内容主要介绍canvas的translate、scale、rotate三种方法canvas之rotate<script type="text/javascript"> window.onload = function(){ var canvas = document.getElementsByTagName('canvas')[0]; ...原创 2019-03-26 22:25:28 · 5648 阅读 · 2 评论 -
canvas入门（七） 中心旋转
运行以下代码<script type="text/javascript"> window.onload = function(){ var canvas = document.getElementsByTagName('canvas')[0]; var context = canvas.getContext('2d'); context.beginPath(); c...原创 2019-03-26 22:29:45 · 1014 阅读 · 0 评论 -
canvas绘制星空
canvas绘制星空原创 2019-03-31 14:26:06 · 1755 阅读 · 1 评论 -
canvas绘制小黄鸭
canvas初试动画——小黄鸭（也是我当初学习canvas的处女作）原创 2019-04-03 22:24:28 · 777 阅读 · 0 评论 -
canvas入门（一）绘制线与正方形
hello,欢迎小伙伴来学习canvas,精彩的canvas世界即将扑面而来首先在body中创建一个canvas标签,如下<canvas></canvas>在js中获取canvas标签var canvas = document.getElementsByTagName('canvas')[0];获取canvas绘图环境var context = canvas......原创 2019-03-26 21:52:32 · 2410 阅读 · 0 评论