68行代码实现贪吃蛇(Canvas)
摘要：<canvas id="gc" width="400" height="400"></canvas> <script> window.onload=function() { canv = document.getElementById("gc"); ctx = canv.getContext("2d
阅读全文
posted @ 2021-09-09 09:45
随笔分类 - Canvas
怎样设置虚线样式
摘要：ctx.setLineDash() 方法设置虚线的线段与间隔的数值, 比如: ctx.setLineDash([20, 5]) 表示线段长度为20px, 间隔为5px; ctx.lineDashOffset 属性设置起始的偏移量.
阅读全文
posted @ 2019-09-23 21:11
怎样设置线条与线条间接合处的样式
摘要：需要使用: ctx.lineJoin 属性; 顾名思意是 "线段连接" 的意思. 它的属性值有下面三个: 1. round: 圆角连接 2. bevel: 矩形拐角连接 3. miter: 折线连接(默认)
阅读全文
posted @ 2019-09-23 20:56
怎样设置线条的末端样式
摘要：需要使用: ctx.lineCap 属性. 直译过来就是 "线条的帽子". 它有三个属性值: 1. butt: 末端为方形 2. round: 末端为原形 3. square: 末端为方形, 但会多出一个宽度相同, 高度为宽度一半的方形延伸. 下面是实际演示:
阅读全文
posted @ 2019-09-23 20:18
怎样设置线的宽度
摘要：需要使用: ctx.lineWidth 属性; 它默认为1.0, 不能是负数.
阅读全文
posted @ 2019-09-23 16:10
怎样设置闭合区域的填充颜色
摘要：需要使用: ctx.fillStyle(). 注意: 1. 如果当前Path没有闭合, 则 ctx.fill() 会先闭合再填充; 2. 案例中使用了四次ctx.beginPath(), 说明这个图形下了四笔.
阅读全文
posted @ 2019-09-23 14:42
怎样设置路径的边框(描边)颜色
摘要：需要使用: ctx.strokeStyle 注意: 1. 每次执行 ctx.beginPath() 都相当于是画画时的"落笔"这个动作, 必须要给它指定一个落笔的位置点; 2. ctx.strokeStyle 作用的是当前路径, 也就是最近的一次执行ctx.beginPath()之后绘制的路径;
阅读全文
posted @ 2019-09-23 14:27
怎样绘制三次贝塞尔曲线
摘要：需要使用: ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
阅读全文
posted @ 2019-09-23 13:53
怎样绘制二次贝塞尔曲线
摘要：需要使用: quadraticCurveTo(cp1x, cp1y, x, y); cp1x: 控制点x坐标 cp1y: 控制点y坐标 x: 结束点x坐标 y: 结束点y坐标 注意: 贝塞尔曲线的两个定位点在两条直线上的速度是一样的.
阅读全文
posted @ 2019-09-23 13:41
怎样绘制一个与两条直线相切的圆弧
摘要：需要使用ctx.arcTo(), 参数是两个控制点的坐标, 比如下面的例子: 注意: 1. ctx.arcTo() 可以绘制与两条直线相切的圆弧; 2. ctx.rect() 可以绘制闭合的矩形;
阅读全文
posted @ 2019-09-23 13:20
怎样将角度转换为弧度
摘要：角度转弧度是按这个公式来的: ( π / 180 ) * 角度数. 在JavaScript中可以这样写:
阅读全文
posted @ 2019-09-23 12:20
怎样填充一个闭合区域
摘要：比如一个三角形边框, 如果想要填充其内部, 则需要使用: ctx.fill() 注意: 如果路径没有闭合, 那ctx.fill()会先闭合再填充.
阅读全文
posted @ 2019-09-23 09:07
怎样绘制一个三角形边框
摘要：三角形是由三条直线组成的, 但我们只需要ctx.lineTo()两次, 因为, ctx.closePath()会就路径的起始点连起来. 如下所示:
阅读全文
posted @ 2019-09-23 09:02
怎样绘制一条线段
摘要：就像画画一样, 首先得有一支笔, 这支笔有粗细, 有颜色, 可以画直线, 也可以画曲线, 然后我们会从某个位置点开始起笔, 然后在另一个位置点结束. 这样就可以画一条线啦~. 具体步骤如下: 1. 创建一条路径: ctx.beginPath(), 表示拿起画笔准备开画. 2. 将笔移到准备绘制的第一
阅读全文
posted @ 2019-09-23 08:55
怎样绘制矩形
摘要：有三种方法: 1. ctx.fillRect(x, y, width, height); 2. ctx.strokeRect(x, y, width, height); 3. ctx.clearRect(x, y width, height); 方法1. ctx可以认为是一支画笔, 所有的和绘图有关
阅读全文
posted @ 2019-09-22 20:27
怎样判断浏览器是否支持canvas
摘要：1. 如果网页必须使用canvas, 则需要告知用户更换或更新浏览器. 这时可以通过在<canvas>标签之间添加替代元素进行 2. 如果对不支持canvas的浏览器提供第二套方案, 或者行为逻辑, 则需要在js脚本中判断浏览器是否支持canvas.
阅读全文
posted @ 2019-09-22 18:19
怎样创建一个canvas画布环境
摘要：1. 由于canvas画布在网页中, 所以需要在html中添加canvas标签: 2. 我们需要控制这个画布, 在画布里面绘制图形, 这时就需要通过js控制: 完成了上面两步以后就可以认为是初始化了一个画布(canvas)环境.
阅读全文
posted @ 2019-09-22 17:58
怎样理解Canvas
摘要：Canvas 是一种在网页中的画布, 是一个HTML5新增的标签, 是一种高效的绘制图形的技术, 在JavaScript中有一个专门的API用于给他赋能( CanvasRenderingContext2D ) 注意: 1. canvas可以做动画 / 游戏 / 各种图表 / 数据可视化等, 功能强大
阅读全文
posted @ 2019-09-22 17:32
