canvas
Jedi Hongbin
hongbin.xyz meta.hongbin.xyz kmyc.hongbin.xyz
展开
-
canvas模拟输入框输入
功能:停止输入时插入点闪烁 输入时插入点更新原创 2022-07-24 21:41:58 · 1756 阅读 · 2 评论 -
canvas心形 渐变色
const linearGradient = ctx.createLinearGradient(0, -100, 10, 100);linearGradient.addColorStop(0, randomRGBA());linearGradient.addColorStop(1, randomRGBA());ctx.fillStyle = linearGradient;function randomRGBA() { const r = floor(random() * 250); .原创 2021-12-06 16:47:12 · 583 阅读 · 0 评论 -
canvas 网格线,心形,线型圆弧
文章目录网格线心形对角线科技风圆弧网格线const canvas = document.getElementsByTagName('canvas')[0];//这么写是为了获取canvas ctx 属性方法推荐const ctx = canvas.getContext('2d');const { offsetWidth, offsetHeight } = document.body;canvas.width = offsetWidth;canvas.height = offsetHeigh原创 2021-12-05 21:02:50 · 684 阅读 · 0 评论 -
canvas打字效果
文章目录基础版 单行输入进阶版多行输出 超出换行使用canvas绘制基础版 单行输入以下是整个html文件可复制查看<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten原创 2021-10-11 15:31:39 · 524 阅读 · 0 评论 -
canvas 绘制文字
const canvas = document.getElementById("canvas") as HTMLCanvasElement;const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;const drawText = ( size: number, ...params: Parameters<CanvasText["fillText"]>) => { ctx.beginPath();原创 2021-09-29 18:13:20 · 1602 阅读 · 0 评论 -
canvas学习02 多个小球动起来
const canvas = document.getElementById("canvas") as HTMLCanvasElement; const ctx = canvas.getContext("2d") as CanvasRenderingContext2D; class Boll { r: number; x: number; y: number; xDir: number; yDir: number; ...原创 2021-09-28 09:37:59 · 244 阅读 · 0 评论 -
canvas 学习 01 画圆 碰撞检测
const width = 700;const height = 500;const canvas = document.getElementById("canvas") as HTMLCanvasElement;const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;ctx.clearRect(0, 0, width, height);ctx.beginPath();ctx.arc(50, 50, 50, 0, Math.原创 2021-09-27 22:17:27 · 149 阅读 · 0 评论