Canvas入门

来源：互联网发布：建筑软件有哪些编辑：程序博客网时间：2024/05/17 09:06

是什么
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属性。稍后练习

阅读全文

0 0