当前位置:首页 » 《我的小黑屋》 » 正文

前端小白的学习之路(HTML5 二)

16 人参与  2024年09月12日 13:21  分类 : 《我的小黑屋》  评论

点击全文阅读


提示:<svg>与<canvas>

目录

目录

一、svg标签

 1.简介

2.常用属性

3.标签

4.使用示例

二、canvas标签

1.简介 

2.常用属性与方法

3.使用示例

1)绘制基础图案

2)绘制组合图案(一个爱心)

3)做一幅动图

三、svg与canvas的区别

 



一、svg标签

 1.简介

       SVG(Scalable Vector Graphics,可缩放矢量图形)是一种用于描述二维图形和动画的 XML 标记语言。它支持基本形状、路径、文本、图像、渐变、滤镜等元素,可以创建丰富多彩、高度可定制的图形和动画效果,特点是可以无限缩放而不失真。

2.常用属性

widthheight:用于指定SVG图形的宽度和高度。您可以使用像素(px)、百分比(%)等单位。

<svg width="200" height="100">

viewBox:用于指定SVG图形的视口框。视口框定义了用户坐标系的范围,并且可以通过它来实现图形的缩放和移动。

<svg viewBox="0 0 200 100">

xmlns:用于指定XML命名空间。对于SVG,通常是指定为"http://www.w3.org/2000/svg"。

<svg xmlns="http://www.w3.org/2000/svg">

fill:用于指定SVG图形的填充颜色。

<svg fill="red">

strokestroke-width:分别用于指定SVG图形的边框颜色和宽度。

<svg stroke="black" stroke-width="2">

classid:用于为SVG图形指定类名和唯一标识符ID,以便通过CSS或JavaScript进行样式和操作控制。

<svg class="my-svg" id="svg1">

preserveAspectRatio:用于指定如何适应SVG图形的视口框和容器大小之间的比例关系。

<svg preserveAspectRatio="xMinYMin meet">

3.<path>标签

<path> 标签用于在 SVG 中定义一个路径。路径可以是直线、曲线、圆弧、贝塞尔曲线等,通过指定路径数据来描述形状。

<path> 标签的主要属性是 d,它用于定义路径的数据。路径数据是一系列的命令和参数,指示了如何绘制路径的形状和轮廓。路径数据中的命令包括移动到(M)、直线到(L)、水平线到(H)、垂直线到(V)、曲线到(C、S、Q、T)、弧线到(A)等。

示例:

<!--使用<path>做一个三角形--><svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">  <path d="M 10 10 L 90 10 L 50 90 Z" fill="none" stroke="black" /></svg>

4.使用示例

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>基本模板</title>    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"></head><body>    <!-- 矢量图: 一种缩放不容易失真的图片 -->    <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" fill="green" class="bi bi-1-circle"        viewBox="0 0 16 16">        <path            d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM9.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383h1.312Z" />    </svg>    <!-- xmlns="http://www.w3.org/2000/svg":指定 SVG 命名空间。        width="100px" height="100px":指定 SVG 图形的宽度和高度为 100 像素。        fill="green":指定图形的填充颜色为绿色。        class="bi bi-1-circle":指定图形的 CSS 类名,用于样式控制。        viewBox="0 0 16 16":指定 SVG 图形的视口框,用于定义用户坐标系的范围。        <path> 元素:                d 属性:定义了 SVG 路径数据,描述了要绘制的路径的形状和轮廓。路径数据使用 SVG 路径命令来描述,如 M、A、L 等。在这个例子中,路径数据描述了一个圆形的轮廓和一个中空的圆环。        M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Z:描述了一个圆形轮廓,圆心在坐标 (1, 8),半径为 7。        m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0Z:描述了一个中空的圆环,圆心在坐标 (15, 0),半径为 8。        M9.283 4.002V12H7.971V5.338h-.065L6.072 6.656V5.385l1.899-1.383h1.312Z:描述了圆环内部的一些装饰效果。 --></body></html>

二、canvas标签

1.简介 

 canvas 是画布标签,需要结合JS才能使用。应用场景: 1. 展示广告2. 数据统计(柱状图、折线图、饼状图) 3. JS小游戏。

2.常用属性与方法

属性

width:画布的宽度。height:画布的高度。

获取上下文对象的方法

getContext('2d'):获取绘图上下文对象,用于绘制2D图形。

绘制图形

fillRect(x, y, width, height):绘制填充的矩形。strokeRect(x, y, width, height):绘制边框的矩形。clearRect(x, y, width, height):清除指定矩形区域的内容。fillText(text, x, y [, maxWidth]):绘制填充的文本。strokeText(text, x, y [, maxWidth]):绘制边框的文本。drawImage(image, x, y [, width, height]):绘制图像。

路径绘制

beginPath():开始绘制路径。moveTo(x, y):将笔触移动到指定位置。lineTo(x, y):绘制一条直线到指定位置。arc(x, y, radius, startAngle, endAngle [, anticlockwise]):绘制圆弧。(x:圆心的 x 坐标,y:圆心的 y 坐标,radius:圆的半斤,startAngle:起始角度,以弧度为单位 ,endAngle:结束角度,以弧度为单位,anticlockwise(可选):布尔值,表示绘制方向。如果为 true,则逆时针绘制;如果为 false(默认值),则顺时针绘制)closePath():闭合路径。stroke():绘制路径的边框。fill():填充路径。

样式设置

fillStyle:设置图形的填充颜色或样式。strokeStyle:设置图形的边框颜色或样式。lineWidth:设置线条的宽度。font:设置文本的字体样式。

其他方法

save():保存当前绘图状态。restore():恢复之前保存的绘图状态。clearRect(x, y, width, height):清除指定矩形区域的内容。translate(x, y):移动绘图原点。rotate(angle):旋转坐标系。scale(x, y):缩放绘图。

3.使用示例

1)绘制基础图案

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>基本模板</title>    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">    <style>        canvas {            background-color: #ccc;        }    </style></head><body>    <!--         特别提醒:        canvas不是容器标签,是画布标签,用于绘制图形图像。        需要结合JS才能使用。        默认尺寸: 300 * 150        不是通过css给图片上颜色, 也不是通过css给图片设置尺寸!!        如果浏览器提示canvas标签包裹着的文本,就说明该浏览器不支持canvas标签,那就需要换一个浏览器试试!     -->    <canvas id="canvas">当前浏览器不支持canvas标签(画布标签),请换一个浏览器再尝试!</canvas>    <script>        // canvas 是画布标签,需要结合JS才能使用。        // 应用场景:        // 1. 展示广告        // 2. 数据统计(柱状图、折线图、饼状图)        // 3. JS小游戏        // 有哪些api?        // 绘制线        // 绘制矩形        // 绘制圆形        // 绘制图片        // 绘制文本        // ...        // 怎么使用?        // 获取canvas对象        var canvas = document.getElementById("canvas");        // 设置画布尺寸        canvas.width = 600;        canvas.height = 800;        // 获取绘制图形图像的对象 (画笔)        var pen = canvas.getContext("2d");        console.log(pen);        // 坐标(0,0)在画布的左上角        // // 1) 绘制线        // // 开始绘制        // pen.beginPath();        // // 设置描边颜色        // pen.strokeStyle = "red";        // // 设置线的宽度        // pen.lineWidth = 5        // // 设置线的样式        // // pen.lineCap = ""        // // 设置起点        // // pen.moveTo(x,y)        // pen.moveTo(100,200);        // // 设置下一个点(终点)        // pen.lineTo(500,200);        // // 结束绘制        // pen.closePath();        // // 描边        // pen.stroke();        // // 2) 绘制三角形        // // 开始绘制        // pen.beginPath();        // // 设置描边颜色        // pen.strokeStyle = "red";        // // 填充颜色        // pen.fillStyle="yellow"        // // 设置线的宽度        // pen.lineWidth = 5        // // 设置线的样式        // // pen.lineCap = ""        // // 设置起点        // // pen.moveTo(x,y)        // pen.moveTo(100,200);        // // 设置下一个点        // pen.lineTo(500,200);        // // 设置下一个点(终点)        // pen.lineTo(300,400);        // // 结束绘制        // pen.closePath();        // // 描边        // pen.stroke();        // // 填充        // pen.fill();        // // 4) 绘制矩形 (第一种写法)        // // 开始绘制        // pen.beginPath();        // // 设置描边颜色        // pen.strokeStyle = "red";        // // 填充颜色        // pen.fillStyle = "yellow"        // // 设置线的宽度        // pen.lineWidth = 5        // // 设置线的样式        // // pen.lineCap = ""        // // 设置起点        // // pen.moveTo(x,y)        // pen.moveTo(100, 200);        // // 设置下一个点        // pen.lineTo(500, 200);        // // 设置下一个点        // pen.lineTo(500, 400);        // // 设置下一个点(终点)        // pen.lineTo(100, 400);        // // 结束绘制        // pen.closePath();        // // 描边        // pen.stroke();        // // 填充        // pen.fill();        // // 4) 绘制矩形 (第二种写法)        // // 开始绘制        // pen.beginPath();        // // 设置描边颜色        // pen.strokeStyle = "red";        // // 填充颜色        // pen.fillStyle = "yellow"        // // 设置线的宽度        // pen.lineWidth = 5        // // 设置线的样式        // // pen.lineCap = ""        // // 设置距离的坐标和尺寸        // // pen.rect(x, y, w,h);        // pen.rect(100, 200, 400,200);        // // 结束绘制        // pen.closePath();        // // 描边        // pen.stroke();        // // 填充        // pen.fill();        // // 4) 绘制矩形 (第三种写法)        // // 开始绘制        // pen.beginPath();        // // 设置描边颜色        // pen.strokeStyle = "red";        // // 填充颜色        // pen.fillStyle = "yellow"        // // 设置线的宽度        // pen.lineWidth = 5        // // 设置线的样式        // // pen.lineCap = ""        // // 设置距离的坐标和尺寸        // // pen.rect(x, y, w,h);        // pen.fillRect(100, 200, 400, 200);        // pen.strokeRect(100, 200, 400, 200);        // // 结束绘制        // pen.closePath();        // 5) 绘制弧形、圆形        // 一个圆形 360 °        // 涉及弧度的计算(公式)        // 弧度 = 角度 * Math.PI / 180         pen.beginPath();        // 设置描边颜色        pen.strokeStyle = "red";        // 填充颜色        pen.fillStyle = "yellow";        // 定义对象记录坐标,半径        var point = {            x: 100,            y: 200,            r: 100,// 半径        }        // 设置圆心坐标        pen.moveTo(point.x, point.y);        // 绘制一个圆形        pen.arc(            point.x, //  x坐标            point.y, // y坐标            point.r,  // 半径            180 * Math.PI / 180, // 开始弧度            360 * Math.PI / 180,// 结束弧度            true // false 顺时针,否则反之        )        // 结束绘制        pen.closePath();        // 描边        pen.stroke();        // 填充        pen.fill();        // 6) 绘制文本        pen.beginPath();        // 填充颜色        pen.fillStyle = "red";        // 设置字体        pen.font = "20px  微软雅黑";        // 设置文本水平位置        pen.textAlign="center";        // 设置垂直文本位置        pen.textBaseline = "bottom";        // 填充文本        pen.fillText("休息一哈!",point.x,point.y);        pen.closePath();    </script></body></html>

2)绘制组合图案(一个爱心)

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>基本模板</title>    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"></head><body>    <canvas id="canvas" class="bg-success"></canvas>    <script>        // 获取canvas对象        var canvas = document.getElementById("canvas");        // 设置画布尺寸        canvas.width = 600;        canvas.height = 800;        // 获取绘制图形图像的对象 (画笔)        var pen = canvas.getContext("2d");        // console.log(pen);        // 绘制矩形        var drawRect = function (x, y, w, h, color) {            pen.beginPath();            pen.fillStyle = color || "red";            pen.fillRect(x, y, w, h);            pen.closePath();        }        // 绘制圆形        var drawCircle = function (x, y, r, s, e, color) {            pen.beginPath();            pen.fillStyle = color || "red";            // pen.strokeStyle= color || "red";            pen.arc(                x,                y,                r,                s * Math.PI / 180,                e * Math.PI / 180,                true            )            pen.closePath();            pen.fill();            // pen.stroke();        }        // 定义对象记录坐标尺寸        var point = {            x: 100,            y: 200,            w: 100,            h: 100,            r: 50        }        // 先绘制矩形        drawRect(            point.x,            point.y,            point.w,            point.h        )        // 在绘制圆形状        drawCircle(            point.x + 50,            point.y,            point.r,            0,            360        )        drawCircle(            point.x,            point.y + 50,            point.r,            0,            360        )        // 判断绘制的角度是为顺时针        // pen.beginPath();        // pen.strokeStyle= "red";        // pen.arc(        //     400,        //     400,        //     100,        //     0 * Math.PI / 180,        //     90 * Math.PI / 180,        //     false // false 顺时针 , true 是逆时针        // )        // pen.stroke();    </script></body></html>

3)做一幅动图

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>基本模板</title>    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"></head><body>    <canvas id="canvas"></canvas>    <!-- <img src="./assets/2.jpg" alt=""> -->    <script>        // 获取画布标签        var canvas = document.querySelector("#canvas");        //  创建图片        var img = new Image();        //  请求图片资源        img.src = "./assets/2.jpg";        //  设置画布尺寸        canvas.width = 800;        canvas.height = 600;        // 获取canvas上下对象(画笔)        var ctx = canvas.getContext("2d");        // console.log(ctx);         // 记录每一帧动画的坐标和尺寸        var arr = [            { sx: 30,  sy: 5, sw: 192, sh: 270, x: 100, y: 100, w: 192, h: 270 },            { sx: 210, sy: 5, sw: 192, sh: 270, x: 100, y: 100, w: 192, h: 270 },            { sx: 380, sy: 5, sw: 192, sh: 270, x: 100, y: 100, w: 192, h: 270 },            { sx: 568, sy: 5, sw: 192, sh: 270, x: 100, y: 100, w: 192, h: 270 },            { sx: 10, sy: 340, sw: 200, sh: 270, x: 100, y: 100, w: 192, h: 270 },            { sx: 216, sy: 340, sw: 200, sh: 270, x: 100, y: 100, w: 192, h: 270 },            { sx: 410, sy: 340, sw: 200, sh: 270, x: 100, y: 100, w: 192, h: 270 },            { sx: 590, sy: 340, sw: 200, sh: 270, x: 100, y: 100, w: 192, h: 270 }        ]        // 记录数组的索引        var index = 7;                // 绘制图像        img.onload = function () {            // 绘制图片            // ctx.drawImage(            //     img,// 图片资源            //     0,// 在画布的x坐标            //     0,// 在画布的y坐标            //     img.width * (1/2),// 在画布的尺寸            //     img.height* (1/2)// 在画布的尺寸            // )            // 绘制图片部分的效果(裁剪图片绘制在画布上)            // ctx.drawImage(            //     img,// 图片资源            //     0, // 在图片的x坐标            //     0, // 在图片的y坐标            //     192, // 裁剪图片的宽度            //     260,// 裁剪图片的高度            //     0,// 在画布的x坐标            //     0,// 在画布的y坐标            //     192,// 在画布的尺寸            //     260// 在画布的尺寸            // )            // 把裁剪的坐标尺寸和画布的坐标尺寸做成变量            ctx.drawImage(                img,// 图片资源                arr[index].sx, // 在图片的x坐标                arr[index].sy, // 在图片的y坐标                arr[index].sw, // 裁剪图片的宽度                arr[index].sh, // 裁剪图片的高度                arr[index].x,  // 在画布的x坐标                arr[index].y,  // 在画布的y坐标                arr[index].w,  // 在画布的尺寸                arr[index].h   // 在画布的尺寸            )        }        // 使用定时器        var timer = setInterval(function(){            index ++;            index = index > arr.length-1 ? 0: index;            // 先清除画布            ctx.clearRect(                0,                0,                canvas.width,                canvas.height            )            // 再绘制图片            ctx.drawImage(                img,// 图片资源                arr[index].sx, // 在图片的x坐标                arr[index].sy, // 在图片的y坐标                arr[index].sw, // 裁剪图片的宽度                arr[index].sh, // 裁剪图片的高度                arr[index].x,  // 在画布的x坐标                arr[index].y,  // 在画布的y坐标                arr[index].w,  // 在画布的尺寸                arr[index].h   // 在画布的尺寸            )        }, 1000 / 12);// 一秒钟执行12次    </script></body></html>

三、svg与canvas的区别

1、canvas时h5提供的新的绘图方法

svg已经有了十多年的历史

2、vanvas画图基于像素点,是位图,如果进行放大或缩小会失真

svg基于图形,用html标签描绘形状,放大缩小不会失真

3、canvas需要在js中绘制

svg在html正绘制

4、canvas支持颜色较svg多

5、canvas无法对已经绘制的图像进行修改、操作

svg可以获取到标签进行操作


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/158759.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1