logo
  • 教程列表
  • SO官方文档
  • html5-canvas 教程
    • html5-canvas 入门
      • 检测画布上的鼠标位置
      • 画布大小和分辨率
      • 如何将 Html5 Canvas 元素添加到网页
      • 屏幕外的画布
      • Hello World
      • Html5 Canvas 功能的索引使用
      • 旋转
      • 将画布保存到图像文件
    • 动画
      • 对动画循环使用 requestAnimationFrame() NOT setInterval()
      • 在画布上为图像设置动画
      • 使用 2D 上下文和 requestAnimationFrame 的简单动画
      • 以指定间隔设置动画(每 1 秒添加一个新矩形)
      • 在指定时间动画(动画时钟)
      • 不要在事件处理程序中绘制动画(一个简单的草图应用程序)
      • 使用 Robert Penners 方程式缓和
      • 使用 requestAnimationFrame 设置帧速率
      • 从 x0y0 到 x1y1 的动画
    • 使用 getImageData 和 putImageData 进行像素处理
      • context.getImageData 简介
    • 响应式设计
      • 创建响应式整页画布
      • 调整大小(或滚动)后的鼠标坐标
      • 响应式画布动画,无需调整大小事件
    • 媒体类型和画布
      • 在画布上基本加载和播放视频
      • 加载和显示图像
      • 绘制 svg 图像
      • 捕获画布并另存为 webM 视频
    • 合成
      • 使用 destination-over 在现有形状后面绘制
      • 使用目标输出删除现有形状
      • 默认合成在现有形状上绘制新形状
      • 剪切图像内的形状与目的地
      • 使用 source-in 剪辑图像内部的图像
      • 内部阴影与 source-atop
      • 反转或否定图像有差异
      • 黑色白色与颜色
      • 增加色彩对比度饱和度
      • 棕褐色 FX 具有光度
      • 使用 globalAlpha 更改不透明度
    • 图片
      • 使用画布进行图像裁剪
      • Tained 帆布
      • context.drawImage 是否在 Canvas 上显示图像
      • 缩放图像以适合或填充
    • 文本
      • 绘图文字
      • 格式化文本
      • 将文本包装成段落
      • 将文本段落绘制成不规则形状
      • 用图像填充文本
      • 沿弧渲染文本
      • 曲线立方和二次贝塞尔曲线上的文字
      • 合理的文字
      • 合理的段落
    • 沿着路径导航
      • 找到曲线上的点
      • 沿着三次贝塞尔曲线找到点
      • 沿二次曲线找到点
      • 沿着一条线找到点
      • 沿着包含曲线和线的整个路径查找点
      • 二次曲线的长度
      • 在位置拆分贝塞尔曲线
      • 修剪贝塞尔曲线
      • 立方贝塞尔曲线的长度(近似)
      • 寻找二次曲线的范围
    • 碰撞和交叉点
      • 2 个圆圈是否发生碰撞
      • 2 个矩形是否发生碰撞
      • 圆和矩形是否发生碰撞
      • 2 个线段是否截获
      • 线段和圆是否发生碰撞
      • 线段和矩形是否发生碰撞
      • 2 个凸多边形是否发生碰撞
      • 2 个多边形是否碰撞(允许凹凸多边形)
      • XY 是弧的内部点
      • 是楔形内的 XY 点
      • 是圆形内的 XY 点
      • 是矩形内的 XY 点
    • 转换
      • 快速绘制许多已翻译的缩放和旋转图像
      • 围绕其中心点旋转图像或路径
      • 转换简介
      • 用于跟踪平移的旋转缩放形状的转换矩阵
    • 路径(仅限语法)
      • 概述基本路径绘制命令行和曲线
      • lineTo(路径命令)
      • arc(路径命令)
      • quadraticCurveTo(路径命令)
      • bezierCurveTo(路径命令)
      • arcTo(路径命令)
      • rect(路径命令)
      • closePath(路径命令)
      • beginPath(路径命令)
      • lineCap(路径样式属性)
      • lineJoin(路径样式属性)
      • strokeStyle(路径样式属性)
      • fillStyle(路径样式属性)
      • lineWidth(路径样式属性)
      • shadowColor shadowBlur shadowOffsetX shadowOffsetY(路径样式属性)
      • createLinearGradient(创建路径样式对象)
      • createRadialGradient(创建路径样式对象)
      • createPattern(创建路径样式对象)
      • stroke(路径命令)
      • 填充(路径命令)
      • clip(路径命令)
    • 在画布上拖动路径形状和图像
      • 如何在 Canvas 上移动形状图像 REALLY()
      • 在画布周围拖动圆形矩形
      • 在 Canvas 周围拖动不规则形状
      • 在画布周围拖动图像
    • 清除屏幕
      • 矩形
      • 原始图像数据
      • 复杂的形状
      • 用渐变清除画布
      • 使用复合操作清除画布
    • 图表和图表
      • 带箭头的线
      • 带箭头的立方二次贝塞尔曲线
      • 楔
      • 填充和描边均为圆弧
      • 饼图与演示
    • 阴影
      • 使用阴影的贴纸效果
      • 如何阻止进一步的阴影
      • 阴影在计算上是昂贵的 - 缓存阴影
      • 添加阴影的视觉深度
      • 内阴影
    • 路径
      • 椭圆
      • 没有模糊的线
    • 多边形
      • 明星
      • 正多边形
      • 渲染圆角多边形
  1. StackOverflow 文档
  2. html5-canvas 教程
  3. html5-canvas 入门

    html5-canvas 入门

  • 检测画布上的鼠标位置 画布大小和分辨率 如何将 Html5 Canvas 元素添加到网页 屏幕外的画布 Hello World Html5 Canvas 功能的索引使用 旋转 将画布保存到图像文件
  • 检测画布上的鼠标位置

Copyright © 2018. All right reserved

tastones.com 备案号:鲁ICP备18045372号-1

  • 关于我们
  • 免责声明