ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Canvas学习与使用

2022-05-17 23:36:00  阅读:200  来源: 互联网

标签:Canvas 使用 ctx 50 学习 stroke let canvas beginPath


Canvas学习与使用

<canvas>HTML5 新增的,一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。

<canvas> 只有两个可选的属性 width、heigth 属性,默认 width为300、height 为 150,单位都是 px

一、绘制形状的原理

栅格的起点为左上角,坐标为 (0,0) 。所有元素的位置都相对于原点来定位;图中蓝色方形左上角的坐标为距离左边(X 轴)x 像素,距离上边(Y 轴)y 像素,坐标为 (x,y)

image-20220517175727492

二、渲染上下文

<canvas> 会创建一个固定大小的画布,会公开一个或多个渲染上下文(画笔),使用渲染上下文来绘制和处理要展示的内容

//设置一个宽500 高500的画布
<canvas id="canvas" width="500" height="500">你的浏览器不支持 canvas,请升级你的浏览器。</canvas>
// 获取画布
let canvas = document.getElementById('canvas');
// 创建上下文对象(画笔)
let ctx = canvas.getContext('2d');

三、绘制矩形

  • 1、fillRect(x, y, width, height):绘制一个填充的矩形。

  • 2、strokeRect(x, y, width, height):绘制一个矩形的边框。

  • 3、clearRect(x, y, widh, height):清除指定的矩形区域,然后这块区域会变的完全透明

  • x, y:指的是矩形的左上角的坐标。(相对于canvas的坐标原点)

  • width, height:指的是绘制的矩形的宽和高。

<canvas class="canvas" width="500" height="500">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
// 获取画布元素
let canvas = document.querySelector('.canvas');
// 创建画笔
let ctx = canvas.getContext('2d');

// 默认的矩形是黑色
ctx.fillRect(0, 85, 150, 75);

// 设置填充颜色
ctx.fillStyle = "#2ecc71";
// 绘制一个矩形
ctx.fillRect(0, 0, 150, 75);

// 设置边框颜色
ctx.strokeStyle = '#3498db'
// 绘制一个矩形边框
ctx.strokeRect(160, 0, 150, 75);

// 清除指定矩形区域
ctx.clearRect(40, 30, 75, 25)

image-20220517200941121

四、绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径,甚至一个子路径,都是闭合的。

使用路径绘制图形需要的步骤:

  1. 创建路径起始点
  2. 调用绘制方法去绘制路径
  3. 把路径封闭
  4. 一旦路径形成,通过描边或填充路径区域来渲染图形

方法:

  1. beginPath() 新建一条路径,路径一旦创建成功,图形绘制命令被指向到路径上生成路径
  2. moveTo(x, y) 把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
  3. closePath() 闭合路径之后,图形绘制命令又重新指向到上下文中
  4. stroke() 通过线条来绘制图形轮廓
  5. fill() 通过填充路径的内容区域生成实心的图形

五、绘制线段

示例1:绘制线段

<canvas class="canvas" width="500" height="500">暂不支持</canvas>
// 获取画布
let canvas =document.querySelector('.canvas');
// 创建画笔
let ctx = canvas.getContext('2d');
// 1. 新建一条路径
ctx.beginPath();
// 2. 将画笔移动到指定位置
ctx.moveTo(50,50);
// 3. 绘制一条从当前位置到指定坐标的直线
ctx.lineTo(100,50);
// 4.闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合,则什么都不做
ctx.closePath();
// 5. 绘制路径
ctx.stroke();

image-20220517205028966

示例2:绘制三角形

<canvas class="canvas" width="500" height="500">暂不支持</canvas>
// 获取画布
let canvas = document.querySelector('.canvas')
// 创建画笔
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0,200)
ctx.lineTo(100,0)
ctx.lineTo(200,200)
ctx.closePath(); //闭合路径
ctx.stroke();// 描边

image-20220517205555471

示例3:填充三角形

<canvas class="canvas" width="500" height="500">暂不支持</canvas>
// 获取画布
let canvas = document.querySelector('.canvas')
// 创建画笔
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0,200)
ctx.lineTo(100,0)
ctx.fill(); // 填充闭合区域。如果path没有闭合,则fill()会自动闭合路径

image-20220517205157230

六、绘制圆弧

1、arc(x, y, r, startAngle, endAngle, boolen): 以(x, y) 为圆心,以r 为半径,从 startAngle 弧度开始到endAngle弧度结束。boolen 是布尔值,true 表示逆时针,false 表示顺时针(默认是顺时针)。

注意:

  1. 这里的度数都是弧度。

  2. 0 弧度是指的 x 轴正方向。

    radians=(Math.PI/180)*degrees   //角度转换成弧度
    

2、arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径画一段圆弧,最后再以直线连接两个控制点。

示例1:

// 获取画布
let canvas = document.querySelector('.canvas')
// 创建画笔
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 40, 0,Math.PI, false);
ctx.stroke();

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GjMmDE4j-1652800931055)(https://s2.loli.net/2022/05/17/ychHP8jbCikE4Nl.png)]

示例2:

ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI * 2, false);
ctx.stroke();

ctx.beginPath();
ctx.arc(150, 50, 40, 0, Math.PI, false);
ctx.stroke();

ctx.beginPath();
ctx.arc(250, 50, 40, 0, Math.PI / 2, false);
ctx.stroke();

ctx.beginPath();
ctx.arc(350, 50, 40, 0, Math.PI / 3, false);
ctx.stroke();

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fr174P5f-1652800931056)(https://s2.loli.net/2022/05/17/fBwt8WziInZ4Dak.png)]

示例3:

ctx.beginPath();
ctx.arc(50, 150, 40, 0, Math.PI * 2, true);
ctx.stroke();

ctx.beginPath();
ctx.arc(150, 150, 40, 0, Math.PI, true);
ctx.stroke();

ctx.beginPath();
ctx.arc(250, 150, 40, 0, Math.PI / 2, true);
ctx.stroke();

ctx.beginPath();
ctx.arc(350, 150, 40, 0, Math.PI / 3, true);
ctx.stroke();

image-20220517214338619

示例4:

ctx.beginPath();
ctx.arc(50, 250, 40, 0, Math.PI * 2, false);
ctx.closePath(); //闭合路径·
ctx.stroke();

ctx.beginPath();
ctx.arc(150, 250, 40, 0, Math.PI, false);
ctx.closePath(); //闭合路径·
ctx.stroke();

ctx.beginPath();
ctx.arc(250, 250, 40, 0, Math.PI / 2, false);
ctx.closePath(); //闭合路径·
ctx.stroke();

ctx.beginPath();
ctx.arc(350, 250, 40, 0, Math.PI / 3, false);
ctx.closePath(); //闭合路径·
ctx.stroke();

image-20220517214429376

示例5:

ctx.beginPath();
ctx.arc(50, 350, 40, 0, Math.PI * 2, true);
ctx.closePath(); //闭合路径·
ctx.stroke();

ctx.beginPath();
ctx.arc(150, 350, 40, 0, Math.PI, true);
ctx.closePath(); //闭合路径·
ctx.stroke();

ctx.beginPath();
ctx.arc(250, 350, 40, 0, Math.PI / 2, true);
ctx.closePath(); //闭合路径·
ctx.stroke();

ctx.beginPath();
ctx.arc(350, 350, 40, 0, Math.PI / 3, true);
ctx.closePath(); //闭合路径·
ctx.stroke();

image-20220517214517227

示例6:

标签:Canvas,使用,ctx,50,学习,stroke,let,canvas,beginPath
来源: https://www.cnblogs.com/Eamon-18/p/16282873.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有