<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* body {
background-color: #000;
}
.box {
height: 300px;
width: 300px;
background-color: #00ff78;
margin: 200px auto;
padding: 40px;
filter: blur(2px)
}
.box1 {
height: 300px;
width: 300px;
background-color: #fff;
border-radius: 50%;
} */
</style>
</head>
<body>
<!-- <div class="box">
</div>
<div class="box1"></div> -->
<canvas id="canvas" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 10px;"></canvas>
<script>
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext("2d")
// 线条
// ctx.moveTo(50, 50); // 设置初始位置，参数为初始位置x和y的坐标点
// ctx.lineTo(200, 200); // 绘制一条从初始位置到指定位置的直线，参数为指定位置x和y的坐标点
// ctx.lineTo(200, 50);
// ctx.lineTo(50, 50);
// ctx.stroke(); // 通过线条来绘制图形轮廓
// ctx.fill(); // 通过填充路径的内容区域生成实心的图形
// 矩形
// ctx.strokeRect(50, 50, 300, 50) // 绘制一个矩形的边框 (x, y, width, height) x和y 是矩形的起点坐标
// ctx.fillRect(50, 50, 300, 50) // 绘制一个填充的矩形 (x, y, width, height) x和y 是矩形的起点坐标
// ctx.clearRect(50, 50, 200, 50) // 清除指定矩形区域 (x, y, width, height) 让清除部分完全透明，x和y 是矩形的起点坐标，width和height 是矩形的宽高
// 圆
// arc(x, y, radius, startAngle, endAngle, anticlockwise)。x和Y为圆心的坐标，radius为半径，startAngle为圆弧或圆的开始位置，endAngle为圆弧或圆的结束位置，anticlockwise是绘制的方向（不写默认为false，从顺时针方向）
// 弧度 = (Math.PI / 180) * 角度。 Math.PI 相当于180 度
// ctx.arc(60, 60, 50, 5, Math.PI, true);
// ctx.stroke();
// ctx.beginPath() // 新建一条路径，生成之后，图形绘制命令被指向到路径上。
// ctx.closePath() // 闭合路径之后图形绘制命令又重新指向到上下文中
// 咱们开启和关闭路径的时候，关闭路径其实并不是必须的，对于新路径其实每次都开启新路径就ok。
// 椭圆
// ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
// x、y：椭圆的圆心位置
// radiusX、radiusY：x轴和y轴的半径
// rotation：椭圆的旋转角度，以弧度表示
// startAngle：开始绘制点
// endAngle：结束绘制点
// anticlockwise：绘制的方向（默认顺时针），可选参数。
// 贝塞尔曲线
// 二次贝塞尔曲线
// quadraticCurveTo(cp1x, cp1y, x, y)，其中cp1x和cp1y为一个控制点，x和y为结束点
// 三次贝塞尔曲线
// ctx.bezierCurveTo(cp1x,cp1y, cp2x,cp2y, x, y)，其中cp1x和cp1y为一个控制点，cp2x和cp2y为第二个控制点，x和y为结束点
// 设置线条样式
// lineWidth 设置当前绘线的粗细。属性值必须为正数。默认值是 1.0。
// lineCap 设置线段端点显示的样子。可选值为：butt，round 和 square。默认是 butt。
// lineJoin 该属性可以设置两线段连接处所显示的样子。可选值为：round, bevel 和 miter。默认是 miter。
// miterLimit 限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度
// 绘制一条宽度为10的直线
// ctx.beginPath()
// ctx.lineWidth = 10;
// ctx.moveTo(50, 20);
// ctx.lineTo(250, 20);
// ctx.stroke();
// ctx.closePath();
// // 绘制一条宽度为20的直线
// ctx.beginPath()
// ctx.lineWidth = 20;
// ctx.lineCap='square'
// ctx.lineJoin='bevel'
// ctx.miterLimit = 10
// ctx.moveTo(50, 50);
// ctx.lineTo(250, 250);
// ctx.lineTo(500, 50);
// ctx.stroke();
// ctx.closePath();
// setLineDash 可以设置当前虚线样式。
// getLineDash 则是返回当前虚线设置的样式，长度为非负偶数的数组。
// ctx.setLineDash([5, 10, 20, 40]);
// console.log(ctx.getLineDash()); // [5, 10, 20, 40]
// 透明度
// ctx.globalAlpha = 0.5;
// 线性渐变
// createLinearGradient(x1, y1, x2, y2)，参数分别为 起点的坐标和终点的坐标。
// 在渐变的设置中还需要一个方法来添加渐变的颜色，语法为：gradient.addColorStop(offset, color)，其中color就是颜色，offset 则是颜色的偏移值，只为0到1之间的数
// 创建渐变
// var gradient1 = ctx.createLinearGradient(10, 10, 400, 10);
// gradient1.addColorStop(0, "#00ff00");
// gradient1.addColorStop(1, "#ff0000");
// var gradient2 = ctx.createLinearGradient(10, 10, 400, 10);
// // 从0.5的位置才开始渐变
// gradient2.addColorStop(0.5, "#00ff00");
// gradient2.addColorStop(1, "#ff0000");
// ctx.beginPath()
// ctx.fillStyle = gradient1;
// ctx.fillRect(10, 10, 400, 100);
// ctx.beginPath();
// ctx.fillStyle = gradient2;
// ctx.fillRect(10, 150, 400, 100);
// 径向渐变
// ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)，参数分别为开始圆的坐标和半径以及结束圆的坐标和半径。
// 图案样式
// Canvas中想绘制图案效果，需要用 createPattern 方法来实现
// createPattern(image, type)，参数分别为：Image 参数可以是一个 Image 对象，也可以是一个 canvas 对象，Type 为图案绘制的类型，可用的类型分别有：repeat，repeat-x，repeat-y 和 no-repeat
// var img = new Image();
// img.src = "./image.png";
// img.onload = function() {
// // 图片加载完以后
// // 创建图案
// var ptrn = ctx.createPattern(img, 'no-repeat');
// ctx.fillStyle = ptrn;
// ctx.fillRect(0, 0, 500, 500);
// }
// 绘制文本
// strokeText（描边）
// ctx.strokeText(text, x, y, maxWidth) 参数分别为：text：绘制的文案 x、y：文本的起始位置 maxWidth：可选参数，最大宽度。需要注意的是当文案大于最大宽度时不是裁剪或者换行，而是缩小字体。
// ctx.strokeText("Canvas 详解", 50, 50);
// fillText（填充）
// ctx.fillText(text, x, y, maxWidth) 参数分别为：text：绘制的文案 x、y：文本的起始位置 maxWidth：可选参数，最大宽度。需要注意的是当文案大于最大宽度时不是裁剪或者换行，而是缩小字体。
// ctx.fillText("Canvas 详解", 50, 50);
// 文本样式
// font 用于绘制文本的样式。默认的字体是 10px sans-serif。
// textAlign 文本对齐的方式。可选值为：left、right、center、start和end。默认值是 start。
// direction 文本的方向。可选值为：ltr（文本方向从左向右）、rtl（文本方向从右向左）、inherit（根据情况继承 Canvas元素或者 Document 。）。默认值是 inherit。
// textBaseline 基线对齐选项，决定文字垂直方向的对齐方式。可选值为：top、hanging、middle、alphabetic、ideographic和bottom。默认值是 alphabetic。
// ctx.font = "30px serif"; // 设置文案大小和字体
// ctx.direction = "ltr"; // 文本方向从左向右
// ctx.textAlign = "left"; // 左对齐
// measureText 测量文本，返回一个 TextMetrics对象。
// var ctx = canvas.getContext('2d');
// ctx.font = "30px serif"; // 设置文案大小和字体
// ctx.beginPath();
// ctx.strokeText("Hi Canvas !", 150, 100);
// var text = ctx.measureText("Hi Canvas !");
// console.log("🚀 ~ 文案宽度：", text.width)
// ctx.beginPath();
// // 设置了文案最大宽度
// ctx.strokeText("Hi Canvas !", 150, 200, 100);
// var text1 = ctx.measureText("Hi Canvas !");
// console.log("🚀 ~ 文案宽度：", text1.width)
// 阴影
// shadowOffsetX、shadowOffsetY
// shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。
// shadowBlur: shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。
// shadowColor: shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。
// ctx.font = "50px serif"; // 设置文案大小和字体
// ctx.shadowColor = "#cccccc"; // 设置阴影颜色
// ctx.fillStyle = "#ee7934"; // 设置填充颜色
// ctx.shadowOffsetX = 10; // X轴上的阴影
// ctx.shadowOffsetY = 10; // Y轴上的阴影
// ctx.shadowBlur = 5; // 阴影的模糊程度
// ctx.fillText("Hi Canvas !", 100, 50);
// ctx.fillRect(100, 100, 200, 100);
// ctx.shadowOffsetX = -10;
// ctx.shadowOffsetY = -10;
// ctx.shadowBlur = 5;
// ctx.fillText("Hi Canvas !", 100, 300);
// ctx.fillRect(100, 350, 200, 100);
// 绘制图片
// drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：只有单纯的绘制功能，可以绘制图片、视频和别的Canvas对象等。
// image：绘制到上下文的元素。
// sx、sy：裁剪框的左上角X轴坐标和Y轴坐标。
// sWidth、sHeight：裁剪框的宽度和高度。
// dx、dy：绘制到上下文的元素，在上下文中左上角的X轴坐标和Y轴坐标。
// dWidth、dHeight：绘制到上下文的元素，在上下文中绘制的宽度和高度。如果不说明，在绘制时image宽度和高度不会缩放。
// var img = new Image();
// img.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191212%2F556cc408058d4c64a46468761406afe6.png&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660103116&t=8dd0c641e1e1890fa65ee80dfa428d34';
// img.onload = function(){
// ctx.drawImage(img, 0, 0);
// }
// 状态的保存和恢复
// save() 和 restore() 方法是用来保存和恢复 canvas 状态的，方法不需要参数。可以理解为就是对canvas 状态的快照进行保存和恢复。
// ctx.fillStyle = "#cccccc";
// ctx.fillRect(10, 10, 300, 100);
// ctx.save(); // 保存状态
// ctx.fillStyle = "#ee7034";
// ctx.fillRect(10, 150, 300, 100);
// ctx.restore(); // 还原到上次保存的状态
// ctx.fillRect(10, 300, 300, 100);
// 移动、旋转和缩放
// 移动：translate(x, y) ，x 是左右偏移量，y 是上下偏移量。
// 旋转：rotate(angle)，angle是旋转的角度，它是顺时针旋转，以弧度为单位的值。
// 缩放：scale(x, y)，x 为水平缩放的值，y 为垂直缩放得值。x和y的值小于1则为缩小，大于1则为放大。默认值为 1。
</script>
<!-- <input id="aa" multiple type="file">
<script>
document.getElementById("aa").onchange = function (e) {
console.log(e)
}
</script> -->
</body>
</html>
canvas
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 项目中有一个需求：实现画板的功能。提供一张图片。可以在上面写字，并且可以放大缩小。 1.图片转换为canvas 在...
- 代码下载：Github视频地址：慕课·canvas小球倒计时 二、倒计时数字展示 2.1、静态数字展示 如果想用一...
- fillStyle 属性设置或返回用于填充绘画的颜色、渐变或样式 strokeStyle 属性设置或返回用于笔触的...
