Canvas 05
绘制图片 图像操作能力，可以动态合成图形或者使用图片作为背景图。 引入图片到canvas中： 获取一个HTMLImageElement的元素或者canvas元素。 使用drawImage将图片源绘制到画板上。 支持的哪些类型的图片源 HTMLImageElement 可以由Image函数构造或者元素 HTMLVideoElement 元素，抓取当前帧作为图片源 HTMLCanvasElement...
Canvas 04
绘制文字 fillText(text, x, y [, maxWidth]) strokeText(text, x, y [, maxWidth]) 填充文本示例 function draw() { var ctx = document.getElementById("canvas").getContext("2d"); ctx.font = "48px serif"; ctx.fi...
Canvas 03
颜色 在前面的章节例子中，我们都是使用默认的线条和填充样式。 fillStyle = color 设置图形填充颜色。 strokeStyle = color 设置图形轮廓颜色。 color可以是css的颜色值，渐变对象和图案对象。 fillStyle属性例子 function draw() { const ctx = document.getElementById("canvas")....
Canvas 02
canvas画布栅格 默认canvas画布就一个高150px，宽300px空间区域。 我们说的网格中一个单位就相当于一个像素，我们可以把他看成一个 二维空间坐标系，以左上角为原点，所有元素的位置都是相对于原点进行 定位。我们可以平移原点，旋转，缩放我们的canvas栅格。 canvas图像绘制 不同于SVG，canvas只支持两种形式的图形绘制：矩形和路径。 矩形绘制 fillRect(x,...
Canvas 01
canvas元素 canvas元素就是一个HTML标签，默认初始化的宽度为300px高度为150px 我们可以使用css样式调整他的尺寸，但是如果CSS尺寸和画布尺寸不一致，可能会出现图像缩放，导致失真问题。（这点十分重要，涉及到绘图坐标的确认） 可以指定canvas元素的width和height参数，避免绘制出来的图像扭曲。 默认内容 我们知道canvas标签能力已经被大部分浏览器支持，但是...
Koi 模板的基础配置
基础配置 您可以通过修改 src/consts.ts 中的配置项来实现主要的配置项修改，以定制您的 Astro 博客站点。每个配置项的详细说明如下所示： | 配置项 | 说明 ...