canvas
关注
分享
扫一扫
Jedi Hongbin
threedev.xyz
展开
-
canvas模拟输入框输入
功能： 停止输入时插入点闪烁 输入时插入点更新原创 2022-07-24 21:41:58 · 1862 阅读 · 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 · 610 阅读 · 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 · 728 阅读 · 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 · 598 阅读 · 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 · 1640 阅读 · 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 · 283 阅读 · 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 · 174 阅读 · 0 评论