HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。 不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。 getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。 ctx 是画布的 2D 渲染上下文对象 （CanvasRe...

绘制一个圆形： var c = document . getElementById ( "myCanvas" ); var ctx = c . getContext ( "2d" ); ctx . beginPath (); ctx . arc ( 100 , 75 , 50 , 0 , 2 * Math . PI ); ctx . ...

剪切一个矩形： 从画布中剪切 200*120 像素的矩形区域。然后，绘制绿色矩形。只有被剪切区域内的绿色矩形部分是可见的： var c = document . getElementById ( "myCanvas" ); var ctx = c . getContext ( "2d" ); // 剪切矩形区域 ctx . rect...

绘制一个矩形： //绘制 150*100 像素的矩形 var c = document . getElementById ( "myCanvas" ); var ctx = c . getContext ( "2d" ); ctx . rect ( 20 , 20 , 150 , 100 ); ctx . stroke (); ...

重新映射画布上的 (0,0) 位置。 translate(x,y); 参数 描述x 添加到水平坐标（x）上的值。y 添加到垂直坐标（y）上的值。 var c=document .getElementById("myCanvas" ); var ctx=c.getContext("2d" ); ctx.translate(0 ,...

fillText() 简介 语法 基本用法 前置属性 textAlign 对齐方式 textBaseline 对齐方式 完整示例 与 strokeText() 的区别 测量文字宽度 典型应用 注意事项 一句话总结 fillText() 简介 fillText() 是 Canvas 2D 上下文中用于在画布上绘制填充文字 的...

[TOC]旋转当前的绘图。 context.rotate(angle);参数值参数 描述angle 旋转角度，以弧度计。 如需将角度转换为弧度，请使用 degrees×Math.PI/180degrees\times Math.PI/180 d e g r e e s × M a t h . P I / 1 8 0 公式进行计算...

基本概念 event 对象的三个核心属性 在 SW 中的应用 常见使用场景 1. 父子 窗口通信 2. 弹出 窗口通信 3. 浏览器扩展通信 安全注意事项 与 SW 的其他触发方式对比 message 是浏览器跨文档/跨窗口消息通信 的原生事件。 基本概念 // 发送消息 targetWindow.postMessage(dat...

moveTo() 简介 语法 类比理解 基本用法 典型应用场景 注意事项 与 lineTo() 的区别 一句话总结 moveTo() 简介 moveTo() 是 Canvas 2D 上下文中用于移动画笔到指定坐标 的方法，它不画线 ，只是改变当前绘制位置。 语法 ctx .moveTo (x , y ); 参数 ...

基本概念 重要区别：CSS尺寸 vs Canvas尺寸 示例说明 常见用途 注意事项 在 HTML5 中，<canvas> 元素用于通过 JavaScript 绘制图形。ctx.canvas.width 和 ctx.canvas.height 是 Canvas 2D 上下文（CanvasRenderingContext2D ）中获取画布实际...