likes
comments
collection
share

在学校被困的第二个周末，用【canvas】浅画个微笑 （feat.Table表单）

作者站长头像
站长
· 阅读数 45

【知识整理向】2 everything sucks/(ㄒoㄒ)/~~

其实是一篇对Canvas的学习与了解文，顺便梳理了下原生HTML中Table表单的知识

canvas画布

官方指路：MDN文档

我的理解：

  1. HTML5新标签，使用 JavaScript 在网页上绘制图像，逐像素渲染

  2. <canvas> </canvas> 定义了一个画布，可以在里面绘制线条、形状、文本等，还可以添加图像、动画。

  3. canvas 标签只是图形容器，绘制图形要在JavaScript中进行操作

属性

只有两个可选属性：width、height，

默认值 width:300px ，height:150px

不建议使用CSS属性来设置 canvas 的宽高

浏览器支持性

判断浏览器是否支持canvas

if(!canvas.getContext) return;

对于支持的浏览器：<canvas></canvas>内部内容会被忽略

不支持的浏览器，则会直接渲染标签内部的替换内容

使用步骤：

1、创建 Canvas 画布

添加id，设置画布的宽高大小

<canvas id='one' width='300' height='300'>
    <p>如果浏览器不支持，显示这段文字，我是替换内容</p>
</canvas>

2、获取 Canvas 画布的渲染上下文

先获取 Canvas 的DOM节点，再用getContext("2d")方法获得渲染上下文和它的绘画功能

对于2D图像而言，给getContext()传入一个参数 2d

<script>
    var canvas = document.getElementById('one')
    var ctx = canvas.getContext('2d')    
</script>

3、用JavaScript进行绘制

  • 绘制图形
画一个矩形（实心）：fillRect(x, y, width, height)	

画一个矩形（空心）：strokeRect(x, y, width, height)	

抠出一个矩形（内部完全透明）：clearRect(x, y, width, height)
  • 绘制线条、形状
beginPath()	新建一条路径

moveTo(x, y)	设置路径的起始点坐标为(x, y)

lineTo(x, y)	绘制一条从当前位置到指定坐标(x, y)的直线

closePath()	闭合路径之后图形绘制命令又重新指向到上下文中

stroke()	描边，绘制出轮廓，不会闭合路径

fill()		填充，绘制实心的图形，调用时若没有闭合路径，会自动闭合
  • 绘制圆弧、圆形
arc(x, y, radius, startAngle, endAngle, anticlockwise)
	以(x,y)为圆心，radius为半径，初始角度startAngle，结束角度endAngle，方向anticlockwise
	anticlockwise值：true--逆时针，false--顺时针
	角度可以用Math.PI来赋值
	
arcTo(x1, y1, x2, y2, radius)
	给定2个控制点的坐标和radius半径画一段圆弧，再以直线连接两个控制点

4、改变图形/线条的颜色

fillStyle='颜色'	图形的填充颜色

strokeStyle='颜色'	轮廓的颜色

牛刀小试

画一个小三角（实心）

代码实现：

<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<body>
    <!-- 定义一个宽高都为100px的正方形画布 + 内置替换元素 -->
    <canvas id="triangle" width="100px" height="100px">
        <p>要是你不支持canvas，那你就支持我吧！</p>
    </canvas>
    <script>
        var c = document.getElementById('triangle')
        var ctx = c.getContext('2d')
        // console.log(ctx)
        ctx.strokeStyle='black'     // 描边的颜色 黑        
        ctx.fillStyle='#1ed760'     // 填充      绿  

        ctx.beginPath()         // 开始作法（新建路径）
        ctx.moveTo(25,25)       // 设置起点
        ctx.lineTo(75,25)
        ctx.lineTo(50,62.5)
        ctx.stroke()   // 描边
        ctx.fill()  // 填充
    </script>   
</body>
</html>

效果展示：

在学校被困的第二个周末，用【canvas】浅画个微笑 （feat.Table表单）

注意： 这里对三角形的描边是不是还剩了一条？

因为在代码中没有调用closePath()来闭合路径，就直接调用stroke()来描边了，它可不会帮忙闭合。

但是fill()方法会帮忙噻，填充图形顺便将画笔儿带回家。

画一个微笑（小白简易版）

代码实现：

<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<body>
    <!-- 不设置，默认宽高300px,150px -->
    <canvas id="smile">
        <p>要是你不支持canvas，那你就支持我吧！</p>
    </canvas>
    <script>
        var c = document.getElementById('smile')
        var ctx = c.getContext('2d')
        ctx.fillStyle='#ffc83d'
        ctx.fillRect(0,0,300,150)   
        ctx.beginPath()
        // 画法：从圆心向右移动（无论顺逆时针） 半径个 像素开始画圆
        ctx.arc(150,75,60,0,Math.PI*2,true)     // 画布中心 逆时针 画一个半径60的圆
        // 移动画笔位置，如果省略，会看见连续的线
        // 新位置应该是开始画圆的地方
        ctx.moveTo(140,60)   
        ctx.arc(125,60,15,0,Math.PI,true)   // 画眼睛  left     位置可以慢慢调
        ctx.moveTo(190,60)   
        ctx.arc(175,60,15,0,Math.PI,true)   // 画眼睛  right
        // ctx.moveTo(185,80)   
        // ctx.arc(150,80,35,0,Math.PI,false)   // 另一种笑脸：移到右边嘴角         
        ctx.moveTo(115,80)     // 移到左边嘴角
        ctx.arc(150,80,35,0,Math.PI,false) // 画嘴巴   顺时针
        ctx.stroke();  
        ctx.closePath()
    </script>   
</body>
</html>

效果展示：

在学校被困的第二个周末，用【canvas】浅画个微笑 （feat.Table表单）

注： 圆的画法是：在圆心向右移动（无论顺逆时针） 半径个像素的地方，开始画圆

table表格

官方指路：MDN文档

table在网页中经常会用到，这里整理的是原生HTML的table表格，很多前端UI库会提供封装好的组件，但我认为先把原生的标签和属性梳理清楚，再去使用比较好，毕竟其实这块的知识也不多。

<table>	         // 一个基础的HTML表格，三列三行（算上表头）	
    <thead>		
        <tr>
            <th>Year</th>
            <th>Month</th>
            <th>Day</th>
        </tr>
    </thead>
    <tbody>
         <tr>
            <td>2022</td>
            <td>January</td>
            <td>10</td>
          </tr>
          <tr>
            <td>2023</td>
            <td>Feburary</td>
            <td>20</td>
          </tr>
    </tbody> 
</table>

table表格中还可以包含其他类型元素，如：caption、tfoot等

单元格td、th

table中有两种类型的单元格，内部都可嵌套其他类型的标签（再嵌套表格也可以）

thtd
单元格表头信息数据
对齐centerleft
文字加粗普通

colspan 跨列合并

水平方向

rowspan 跨行合并

垂直方向

scope

标识单元格是否该列/行/列组/行组的表头

可选值表示
col当前列的表头
row当前行的表头
colgroup--
rowgroup--

valign

单元格中内容的垂直排列方式

可选值表示
top上
middle居中对齐（默认值）
bottom下
baseline基线

【HTML】{ Canvas画布，Table表格 } 简单上手 (知识整理向)

caption 表格标题

<caption>标签直接放在表格内部</caotipn>

tfoot 页脚

表格的脚注或表注

和thead、tbody用法一样，内部必须有tr标签

属性

注：这里忽略了一些不推荐使用（比如align、bgcolor）和不常用（比如frame、rules、summary）的属性

width

表格的宽度 不带单位

默认内容撑开宽高

border

表格、单元格边框的厚度， 不带单位

默认无边框

如果带了border属性，但没设置具体值，默认属性值为1

在学校被困的第二个周末，用【canvas】浅画个微笑 （feat.Table表单）

值越大，边框越粗（指表格边框，单元格边框不变）

在学校被困的第二个周末，用【canvas】浅画个微笑 （feat.Table表单）

cellpadding

单元格中的内边距， 不带单位

默认无内边距

如果带了cellpadding属性，但没设置具体值，默认属性值为0（也就是无内边距）

cellspacing

单元格之间的边距， 不带单位

默认值为2（大概）

一般都会设置为0 cellspacing='0'

fieldset分组

将表内的相关元素分组

当一组表单元素放到 <fieldset> </fieldset>标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

在学校被困的第二个周末，用【canvas】浅画个微笑 （feat.Table表单）

legend标签

为 fieldset 元素定义标题

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

属性

name： 规定 fieldset 的名称

好想当一名银河修理员，因为现在人类不宜出行呜呜呜……

转载自:https://juejin.cn/post/7163008568889704462
评论
请登录