H5的canvas详解、说明

向右看齐 2023-07-18 14:18 19阅读 0赞

# 一、定义 #

Canvas：canvas是一个可以使用Javascript在其中绘制图像的HTML元素（行内元素）

# 二、使用(超过画布的内容不显示) #

<canvas id="canvas1" width="300px" height="300px">					//创建标签
    	你的浏览器不支持canvas！			//如果是IE8及其以下的识别不了就给出提示，能识别就不会显示
    </canvas>
    <script type="text/javascript">			//利用脚本画图
    	let ctx=$('#canvas1').get(0).getContext('2d');	//获得canvas的上下文（即画笔），在getContxt（）里面必须有参数2d（但现在还没有3d，开发者说以后会出来），且要用原生js
    	ctx.fillRect(50,50,100,50);			//画图（画了个矩形，参数为左上角的x，y坐标，矩形的宽高）
    </script>

注意：1、**canvas的默认尺寸是300\*150**  
2、canvas画布的宽高需要在行内样式设置；也可以在Javascript里面设置（如canvas.width=100; canvas.height=100;但不能通过canvas.style.width或者canvas.style.height来设置），但也是不能内部样式中设置就会缩放画布，就不会起到扩大画布的效果还会造成模糊

# 三、canvas的一些基本图形绘制 #

### 1、矩形（唯一一个可以直接绘制的形状） ###

<canvas id="canvas">
    	你的浏览器不支持
    </canvas>
    <script type="text/javascript">
        let canvas=$('#canvas').get(0);
        let ctx=canvas.getContext('2d');
        canvas.width=300;
        canvas.height=300;
        /* * 绘制一个填充矩形 fillRect（） * 绘制一个描边矩形 strokeRect（） * 清除一个矩形形状的区域 clearRect（） * */
        ctx.fillRect(50,50,50,50);
        ctx.strokeRect(100,100,50,50);
        ctx.clearRect(75,75,25,25);
    <script>

### 2、路径（一个路径不会显示出来，需要描边和填充的配合） ###

#### a）、矩形路径 ####

/* * 绘制一个矩形路径,没有填充和描边 rect() * fill()填充 stroke()描边 * */
    ctx.beginPath();				//路径开始
    ctx.rect(75,75,25,25);			//绘制矩形路径
    ctx.stroke();					//描边
    ctx.closePath();				//路径闭合

#### b）、直线路径 ####

/* * 绘制一条直线 moveTo（）：起点 lineTo（）：终点 * */
    ctx.beginPath();
    ctx.moveTo(200,100);					//起点，直线是默认的两像素的宽
    ctx.lineTo(100,200);					//终点
    ctx.moveTo(50,200.5);					//起点，宽1像素
    ctx.lineTo(150,200.5);					//终点
    ctx.stroke();
    ctx.closePath();

注意：这里的直线颜色默认会有一点虚  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]

#### c）、三角形路径 ####

/* * 绘制三条直线 moveTo（）：起点 lineTo（）：终点 * */
    ctx.beginPath();
    ctx.moveTo(50,100);
    ctx.lineTo(150,100);
    ctx.lineTo(100,200);
    ctx.lineTo(50,100);
    ctx.stroke();
    ctx.closePath();

#### d）、圆和圆弧 ####

/* * 绘制圆弧、圆 arc(圆心x，圆心y，半径，起始角度，结束角度，旋转方向); * 旋转方向取值：true（逆时针）|false（默认，顺时针） * */
    ctx.beginPath();
    ctx.arc(150,150,100,Math.PI/2,Math.PI,false);
    ctx.fill();
    ctx.closePath();

### 3、绘制文本（处理文本能力很弱） ###

/* * font 字体的样式（有一定的顺序 斜体-大小-字体） * textAlign 文本对齐方式（以起始点做为参考）,取值left|center|right|start|end * fillText("文本"，起始x，起始y，宽度) 填充字体，这里的宽度是只能压缩不能放大（不写是默认大小） * strokeText("文本"，起始x，起始y，宽度) 描边字体，同上 * */
    ctx.font='italic 50px Arial';
    ctx.textAlign='end';
    ctx.fillText('Hi,there!',100,50);

### 4、绘制图片 ###

/* * let img=new Image(); ①、创建对象，获取图片 * img.src='../images/image03.jpg'; * img.addEventListener('load',function () { ②、当图片加载完成开始绘制 * …………………… ③、绘制图片有三种类型 * =>绘制默认大小的图片：ctx.drawImage(图片，起始x，起始y) * =>绘制经过缩放的图片：ctx.drawImage(图片，起始x，起始y，缩放后的宽，缩放后的高) * =>绘制经过切片的图片：ctx.drawImage(图片，sx，sy，sw，sh，dx，dy，dw，dh) * s ==> 原始图片资源 d ==> 画布 * }); * */
    let img=new Image();
    img.src='../images/image03.jpg';
    img.addEventListener('load',function () { 
        ctx.drawImage(img,100,100,100,100,50,50,200,200);
        //先把原图片切片之后，在放在画布上面去具体操作
    })

### 5、视频绘制 ###

视频绘制其实就是视频一帧一帧的绘制，在利用定时器显示出来

### 6、canvas内容样式设置 ###

#### a）、颜色 ####

/* * fillStyle 填充颜色，取值与在css里面相同 * strokeStyle 描边颜色，同上 * */
    ctx.fillStyle='rgba(150,50,50,.5)';		//设置颜色
    ctx.beginPath();
    ctx.arc(100,100,50,Math.PI/2,Math.PI*2,true);
    ctx.fill();					//开始填充
    ctx.closePath();

#### b）、透明度 ####

/* * globalAlpha 透明度，取值0~1 * */
    ctx.strokeStyle='#ccc';				//设置颜色
    ctx.globalAlpha=.6;					//设置透明度
    ctx.beginPath();
    ctx.moveTo(50,100);
    ctx.lineTo(50,200);
    ctx.stroke();						//开始描边
    ctx.closePath();

#### c）、线形设置 ####

/* * 线宽：lineWidth 取值0~正无穷 * 线两端样式：lineCap 取值butt（默认值，方的）|round（圆的）|square（方的，但是会比butt宽一点） * 线拼接样式：lineJoin 取值miter（默认值，方的）|round（圆的）|bevel（带棱角的） * */
    ctx.strokeStyle='#ccc';				//颜色
    ctx.globalAlpha=.5;					//透明度
    ctx.lineWidth=10;					//线宽
    ctx.lineCap='round';				//线两端
    ctx.lineJoin='miter';				//线连接方式
    ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.lineTo(50,100);
    ctx.lineTo(100,100);
    ctx.stroke();
    ctx.closePath();

![在这里插入图片描述][20200329124757282.png]![在这里插入图片描述][20200329124847712.png]![在这里插入图片描述][20200329124955343.png]

#### e）、线性渐变 ####

/* * createLinearGradient（渐变起始x，渐变起始y，渐变终止x，渐变终止y）创建渐变 * addColorStop（位置，颜色）开始设置渐变，位置取值为0~1 * fillStyle添加渐变 * */
    let linearGradient=ctx.createLinearGradient(50,50,150,150);
    linearGradient.addColorStop(0,'green');
    linearGradient.addColorStop(.25,'yellow');
    linearGradient.addColorStop(.5,'blue');
    linearGradient.addColorStop(.75,'black');
    linearGradient.addColorStop(1,'red');
    ctx.fillStyle=linearGradient;
    ctx.beginPath();
    ctx.rect(50,50,100,100);
    ctx.fill();
    ctx.closePath();

![在这里插入图片描述][20200329130053169.png]

#### f）、阴影 ####

/* * shadowOffsetX x方向的阴影 * shadowOffsetY y方向的阴影 * shadowBlur 模糊程度，取值0~正无穷 * shadowColor 阴影颜色 * */
    ctx.fillStyle='#ccc';
    ctx.shadowOffsetX=5;
    ctx.shadowOffsetY=5;
    ctx.shadowBlur=10;
    ctx.shadowColor='black';
    ctx.beginPath();
    ctx.rect(50,50,100,100);
    ctx.fill();
    ctx.closePath();

![在这里插入图片描述][20200329133640679.png]

#### g）、变换translate（）、rotate（）、scale（） ####

注意变换不会影响原有的内容，但会影响坐标，所以需要在变换之后再返回原来的坐标

##### translate（） #####

/* * 坐标系变换：translate(x，y) 把坐标系的原点变换到x，y处 * */
    ctx.fillRect(0,0,100,100);             //不会影响变换之前的内容
    ctx.save();								//保存原来的坐标
    ctx.translate(100,100);                 //坐标系变换
    ctx.fillStyle='tomato';
    ctx.fillRect(0,0,100,100);  
    ctx.restore();							//恢复原来的坐标

![在这里插入图片描述][20200329140226151.png]

##### rotate（） #####

/* * 旋转：rotate(angle) 以坐标系的原点旋转angle度 * */
    ctx.save();                                 //保存原来的坐标系
    ctx.rotate(20*Math.PI/180);                 //开始坐标系旋转
    ctx.fillStyle='tomato';
    ctx.fillRect(100,100,10,10);             
    ctx.restore();                              //坐标系恢复
    ctx.fillRect(110,110,20,20);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]

##### scale（） #####

/* * 缩放：scale(x,y) 整个坐标系下的x，y缩放 * */
    ctx.save();                                 //保存原来的坐标系
    ctx.scale(1.5,1.5);                 //开始坐标系缩放
    ctx.fillStyle='tomato';
    ctx.fillRect(100,100,50,50);
    ctx.restore();                              //坐标系恢复

![在这里插入图片描述][20200329142413398.png]

#### h）、动画 ####

**原理**：先定义一个初始状态，然后在定义一个定时器，定时器内部执行一个回调函数，记得要在函数内对当前的画面清除，然后在函数内重新绘制要变化的效果，由于肉眼会有视觉停留，所以有动画效果

let timer=setInterval(function () { 
    	ctx.clearRect(0,0,300,300);				//每次清除画布
    	ctx.save();
        ctx.fillStyle='#'+Math.floor(Math.random()*256);
        ctx.beginPath();
        ctx.arc(Math.random()*200+50,Math.random()*200+50,Math.random()*50,0,Math.PI*2);
        ctx.fill();
        ctx.closePath();
        ctx.restore();
    },100)

![在这里插入图片描述][20200329144843698.gif]

本文只用于个人学习和记录

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: /images/20230528/27dfeda870cc4f44aae0be567136ca8a.png
[20200329124757282.png]: https://img-blog.csdnimg.cn/20200329124757282.png
[20200329124847712.png]: https://img-blog.csdnimg.cn/20200329124847712.png
[20200329124955343.png]: /images/20230528/d39b91bfa7aa4935bb3f0270f126f156.png
[20200329130053169.png]: /images/20230528/4c7f6aeca63c4d2b902aa55daf6354ee.png
[20200329133640679.png]: /images/20230528/274137e313a7446e91bc04ee16dca01a.png
[20200329140226151.png]: /images/20230528/992f5dccca964de28ee388f3bca074f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]: /images/20230528/aa8fa47a0a114aba897d2afffdb67e6b.png
[20200329142413398.png]: /images/20230528/d17d67be6eb84a9bb60e11da42d83caa.png
[20200329144843698.gif]: /images/20230528/e5eb30f114954b6180ba73a6509536ad.png