Canvas入门
程序员文章站
2022-06-04 16:16:56
...
是什么
canvas–画布，canvas是HTML5的一个标签
用来定义图形，提供了强大的图片处理功能，但是需要注意的是canvas并不绘制图形，只是一张画布，我们要通过脚本在上面绘制图形。
能做什么
基本图形绘制（直线、三角形、矩形、图标等）
文字绘制
图形变形和图片合成
图片以及视频的处理
动画实现
小游戏制作
IE8及以下不支持canvas标签
如何定义画布
- 在html中引入canvas标签
- 定义canvas宽高
- 默认width=’300’,height=’150’
- 我们不能通过style=’width:500px;height:500px’设置其宽高，这样相当于强行拉伸了画布，从而导致问题,正确方式下面会讲到。
- 定义canvas样式（背景色、边框等）（通过style）
如何绘画
首先我们要通过脚本找到画布
<script type="text/javascript">
// 获取 canvas 元素对应的 DOM 对象
var canvas_1 = document.getElementById("canvas_1");
// 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
//这里一定要是2d，不能是2D
var ctx = canvas_1.getContext("2d");
// 打印一下，查看是否能够显示具体环境
console.log(ctx);
</script>-
canvas的坐标轴
画一条直线
我们需要知道线的起点，线的终点，线的颜色、线的宽度四大要素 - 开始定义路径：beginpath()
- 线的起点：moveTo(x坐标，y坐标）
- 线的终点：lineTo(x坐标，y坐标)
- 关闭路径：closePath()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
当前浏览器不支持 canvas
</canvas>
</div>
</body>
<script type="text/javascript">
// 获取 canvas 元素对应的 DOM 对象
var canvas_1 = document.getElementById("canvas_1");
// 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
var ctx = canvas_1.getContext("2d");
// 打印一下，查看是否能够显示具体环境
console.log(ctx);
// 开始绘制
ctx.beginPath();
//设置绘制起点
ctx.moveTo(0,0);
//设置绘制下一个点
ctx.lineTo(700,400);
//结束绘制
ctx.closePath();
</script>
</html>这样我们在浏览器上还看不到效果，我们需要定义线的宽度以及颜色
- 设置笔触线条的宽度：lineWdth()-
- 设置填充路径使用的填充风格以及颜色：fillStyle()
- 把定义的填充上：fill();
- 设置绘制 canvas 路径的填充风格(线框)：strokeStyle();
- 填充 canvas 当前路径绘制边框:stroke()
- 填充风格支持的属性
- 符合颜色格式的字符串值，表示使用纯色填充
- CanvasGradient，表明使用渐变填充
- CanvasPattern，表明使用位图填充
var canv=document.getElementById("canvas1");
var ctx=canv.getContext("2d");
console.log(ctx)
ctx.beginPath();
ctx.moveTo(10,50);
ctx.lineTo(200,50);
ctx.closePath();
ctx.lineWidth=50;
ctx.lineJoin="round"
ctx.strokeStyle="red";
ctx.stroke();
ctx.fillStyle='blue';
ctx.fill();绘制三角形以及矩形
var canv=document.getElementById("canvas1");
var ctx=canv.getContext("2d");
console.log(ctx)
ctx.beginPath();
ctx.moveTo(10,50);
ctx.lineTo(200,50);
ctx.lineTo(200,200);
ctx.lineTo(10,200);
ctx.closePath();
ctx.lineWidth=50;
ctx.lineJoin="round"
ctx.strokeStyle="red";
ctx.stroke();
ctx.fillStyle='blue';
ctx.fill();以上代码是矩形绘制
设置图形的边角属性
- lineJoin
- bevel 创建斜角
- round 创建圆角
- miter 默认，创建尖角
总结
今天简单的了解了canvas历史以及基本用途，同时用代码
主要练习了canvas的直线以及基本图形画法
圆圈画法用到arc属性。稍后练习