Canvas的基本用法

最新推荐文章于 2023-07-06 06:45:00 发布
最新推荐文章于 2023-07-06 06:45:00 发布
阅读量587 收藏 2
点赞数
分类专栏： 需要使用才学的技术 文章标签： javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zheng_jia_jun/article/details/126239856
版权

Canvas的基本用法

是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素，例如，它可以用于绘制图表、制作图片构图或者制作简单的 (以及不那么简单的) 动画。

如何使用
首页我们先要在页面上创建一个 canvas 双标签, canvas 标签有属性 width,height 来分别设置他们的宽高，不设置的话，标签默认宽度为 300px,高度为 150px, 请勿使用 css 直接定义 canvas 的宽度，这样会导致用 canvas 绘画出来的图像变形。

如果浏览器版本太老的话会直接不解析这个标签，直接显示出您的浏览器太旧不支持 canvas 这段文字

    <canvas id="canvas" width="600px" height="600px">
    	您的浏览器太旧不支持canvas
    </canvas>

canvas 的基本使用
了解之后我们先定义一个基本的 canvas 骨架，关键代码查看注释

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
      // 获取 canvas 元素
        var canvas = document.getElementById('tutorial');
        // 判断是否支持 canvas
        if (canvas.getContext){
        	// 创建一个 2D渲染上下文
          var ctx = canvas.getContext('2d');
        }
        // 后续代码片段，后面的说的代码都放到这里即可
        code.....
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

上面的脚本中包含一个叫做 draw() 的函数，当页面加载结束的时候就会执行这个函数。通过使用在文档上加载事件来完成。

在 canvas 中绘制矩形

1, 绘画一个填充颜色的矩形

// 绘制填充矩形  ctx.fillRect(x, y, width, height)
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,200,20);

在这里插入图片描述
2, 绘制一个矩形的边框

// 绘制一个矩形的边框  ctx.strokeRect(x, y, width, height)
ctx.strokeStyle="#FF0000";
ctx.strokeRect(0,0,200,20);

在这里插入图片描述
3, 清除指定的矩形区域的内容

// 清除指定矩形的内容  clearRect(x, y, widh, height)
ctx.fillStyle="red";
ctx.fillRect(50,50,150,75);
ctx.clearRect(50, 50, 100, 50);

在这里插入图片描述

绘制路径(path)

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

// 绘制流程
1.首先，你需要创建路径起始点。
ctx.beginPath()
2.确定路径起始位置
ctx.moveTo(x, y)
3. 绘制路径
ctx.lineTo(x,y)
4. 关闭路径
ctx.closePath()
5, 填充或者描边路径
ctx.fill()
ctx.stroke()

绘制一个三角形

 ctx.beginPath();
 // 移动画笔起始位置
 ctx.moveTo(50, 50);
 // 绘制第一天线路
 ctx.lineTo(200, 50);
 // 绘制第二条线路
 ctx.lineTo(200, 200);
 // 关闭路径
 ctx.closePath(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形
 // 描边
 ctx.stroke(); //描边。stroke不会自动closePath()

展示效果
在这里插入图片描述
绘制圆弧

// 以(x, y)为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)
arc(x, y, r, startAngle, endAngle, anticlockwise)'
 
// 演示例子1  只画圆弧
ctx.beginPath();
ctx.arc(100, 100, 60, 0, Math.PI , false);
ctx.stroke();

展示效果

在这里插入图片描述

// 演示例子2  圆弧加封闭线段
ctx.beginPath();
ctx.arc(100, 100, 60, 0, Math.PI , false);
ctx.stroke();

在这里插入图片描述

第二种画弧线的方法

根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。

// arcTo(x1, y1, x2, y2, radius)

// 演示案例
 	ctx.beginPath();
    ctx.moveTo(50, 50);
  	//参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径
    ctx.arcTo(200, 50, 200, 200, 50);
    ctx.lineTo(200, 200)
    ctx.stroke();

在这里插入图片描述

添加样式和颜色

画完图像之后，默认情况下，线条和填充颜色都是黑色，需要填充不同的颜色或者描边颜色，使用以下两种方法

// 1.设置填充颜色
ctx.fillStyle = '色值'
// 2.设置描边颜色
ctx.strokeStyle = '色值'

设置路径宽度

// 设置线宽, 默认是 1，不接受负值
ctx.lineWidth = 20

// 例子

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineWidth = 20;
ctx.stroke();

ctx.beginPath();
ctx.moveTo(110, 50);
ctx.lineTo(160, 50)
ctx.lineWidth = 30;
ctx.stroke()

在这里插入图片描述
设置路径结束的端点样式

/* type 端点样式:
butt：线段末端以方形结束 (默认)
round：线段末端以圆形结束
square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
*/
语法：  ctx.lineCap = type

演示例子

// 开始绘制第一条线
ctx.beginPath();
ctx.lineCap = "round"
ctx.lineWidth = 10;
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.stroke();
ctx.closePath();

// 开始绘制第二条线
ctx.beginPath();
ctx.lineCap = "butt"
ctx.moveTo(10, 30);
ctx.lineTo(100, 30);
ctx.stroke();
ctx.closePath();

// 开始绘制第三条线
ctx.beginPath();
ctx.lineCap = "square"
ctx.moveTo(10, 50);
ctx.lineTo(100, 50);
ctx.stroke();
ctx.closePath();

展示效果
在这里插入图片描述
设置路径拐角处的样式

// 语法
// Type : 
// 1. round 端点拐弯处使用圆角
// 2. bevel 端点处使用平滑拐角
// 2. miter 端点处使用直接尖角拐角 (默认)

ctx.lineJoin = Type

例子展示

// 绘制第一条直线
    ctx.beginPath();
    ctx.moveTo(50,100);
    ctx.lineTo(150,50);
    ctx.lineTo(250,100);
    ctx.strokeStyle = 'pink';
    ctx.lineWidth = '25';
    // 使用bevel
    ctx.lineJoin = 'bevel';
    ctx.stroke();
    // 绘制第二条直线
    ctx.beginPath();
    ctx.moveTo(50,200);
    ctx.lineTo(150,150);
    ctx.lineTo(250,200);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = '25';
    // 使用round
    ctx.lineJoin = 'round';
    ctx.stroke();
    // 绘制第三条直线
    ctx.beginPath();
    ctx.moveTo(50,300);
    ctx.lineTo(150,250);
    ctx.lineTo(250,300);
    ctx.strokeStyle = 'orange';
    ctx.lineWidth = '25';
    // 使用miter
    ctx.lineJoin = 'miter';
    ctx.stroke();

在这里插入图片描述
setLineDash 绘制虚线

canvas 中 使用 setLineDash 来设置虚线样式

// 语法 setLineDash([实线长度，实线间隔])

// 虚线偏移量
ctx.lineDashOffset = 20;
// 设置虚线样式
ctx.setLineDash([20,2])
// 绘制虚线
ctx.strokeRect(10,10,200,200)

在这里插入图片描述
canvas 绘制文本
在 canvas 中也可以绘制文本

// 语法
fillText(text, x, y [, maxWidth])
strokeText(text, x, y [, maxWidth])
// 在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的

演示案例

// 设置字体属性
ctx.font = "100px 黑体 "
// 绘制填充的字
ctx.fillText("你好世界", 10, 100);
// 绘制只有路径的字
ctx.strokeText("你好世界", 10, 200)

在这里插入图片描述
canvas 支持我们设置文本的样式，配置基本跟 css 设置字体一致

1. font = value
当前我们用来绘制文本的样式。这个字符串使用和 CSS font属性相同的语法. 默认的字体是 10px sans-serif。
2. textAlign = value
文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
3. textBaseline = value
基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
4. direction = value
文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

canvas 绘制图片
我们可以在 canvas 上 使用 ctx.drawImage(img, x,y,width,height)绘制图片

// 例子
var img = new Image();   // 创建img元素
// ​ 考虑到图片是从网络加载，如果 drawImage 的时候图片还没有完全加载完成，则什么都不做
// 个别浏览器会抛异常。所以我们应该保证在 img 绘制完成之后再 drawImage。
img.onload = function(){
  ctx.drawImage(img, 0, 0,200,100)
}
img.src = 'https://tse4-mm.cn.bing.net/th/id/OIP-C.ayHAnLNCZlGIS-lepe1ISgHaEo?pid=ImgDet&rs=1'; // 设置图片源地址

展示效果
在这里插入图片描述
保存状态和恢复状态
save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。
​ Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。

使用 restore() 即可回到上一次 save() 的状态 是堆栈的先进后出的形式

ctx.fillStyle = 'blue'       // 设置颜色为蓝色
ctx.fillRect(30, 30, 120, 120); // 使用新的设置绘制一个矩形
ctx.save();                  // 保存当前状态
ctx.fillStyle = 'pink'       // 改变颜色为粉色
ctx.fillRect(45, 45, 90, 90);   // 使用新的配置绘制一个矩形
// 回到上一个状态
ctx.restore();   
ctx.fillRect(60,60, 60, 60); // 绘制矩形，颜色变回保存的蓝色

展示例子
在这里插入图片描述

zheng_jia_jun
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android编程之绘图canvas基本用法示例
08-29
主要介绍了Android编程之绘图canvas基本用法,结合实例形式分析了Android canvas绘图的相关方法与使用技巧,需要的朋友可以参考下
用canvas做一个DVD待机动画的实现代码
12-13
免责声明 不是打算教 canvas，只是觉得好玩就简单看了一下。 意思就是做得略粗糙，别喷我。。 效果 帧数略低，实际当然流畅得多。   实现 HTML <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <style> * {margin: 0;padding: 0;} body {background-color: l
tkinter的canvas基本用法.docx
04-08
tkinter的canvas基本用法.docx
canvas简易使用教程
BUG_CONQUEROR_LI的博客
09-19 6485
canvas绘制矢量图: 是HTML5新增的，一个可以使用脚本(通常为JavaScript) 在其中绘制图像的HTML元素。提供了一个通过和的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑(如照片集)以及实时视频处理等方面。
Canvas的基本介绍与使用，图解+案例带你快速上手Canvas
~~~
09-16 3544
Canvas的基本介绍与使用，图解+案例带你快速上手Canvas
关于canvas的使用（超详细的canvas知识体系讲解）
adminsir0的博客
06-07 8254
canvas,js特效，图形绘制，路径绘制，图片绘制，动画效果，贝塞尔曲线
H5学习笔记（三）--canvas绘制矩形、路径、曲线和变换
qq_44753552的博客
09-14 1016
目录1、绘制矩形笔记：实例2、绘制路径笔记：实例3、绘制曲线canvas绘制圆形canvas绘制圆弧二次贝塞尔三次贝塞尔 1、绘制矩形 笔记： HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他 的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形： ---->绘制一个填充的矩形（填充色默认为黑色） fillRect(x, y, width, height) ---->绘制一个矩形的边框（默认边框为:一像素实心黑色）
【前端】【canvas详解 非常详细的使用方法】
PiPiFamily的博客
06-08 3794
canvas使用详细教学
canvas 基本用法
似水流年QC的博客
07-05 2601
Canvas 是 HTML5 新增的元素，它就像一块幕布，可通过JavaScript脚本在 Web 页面上绘制图形、动画和其他可视化内容。四、canvas应用场景。一、什么是canvas。二、canvas用法。
Canvas详细使用方法(一)
聪明勇敢有力气的博客
03-11 2041
Canvas详细使用
详解HTML5 canvas绘图基本使用方法
09-28
主要介绍了详解HTML5 canvas绘图基本使用方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
canvas-基本用法
nicecode
07-26 634
canvas基本用法 1.什么是canvas(画布) <canvas> 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形 例如，它可以用于绘制图形，创建动画。<canvas> 最早由Apple引入WebKit 我们可以使用<canvas>标签来定义一个canvas元素 ----->使用<canvas>标签时，建议要成对出现，不要使用闭合的形式。 ----->canvas元素默认具有高宽 wi
带你玩转自定义view系列--Canvas之Path的详解
最新发布
hdbdhdbh的博客
07-06 283
带你玩转自定义view系列--Canvas之Path的详解
【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！
weixin_55846296的博客
06-09 5604
前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、 还原坐标系2、 绘制背景3、 绘制时钟指针4、循环绘制。
canvas详细入门教程（1W字 吐血分享）
热门推荐
nvgis的博客
10-14 3万+
canvas入门必看教程，学完可绘制动画！
Canvas 基础使用
19年的墨先生的博客
11-15 1504
Canvas 基础使用
canvas的基本使用
jingde528的博客
11-09 1690
canvas的基本使用
canvas基本用法
编程界明世隐的博客
01-14 1万+
首先创建canvas元素 <canvas id="canvas" width="150" height="150"></canvas> width和height 也可以不指定，canvas会初始化宽度为300像素和高度为150像素 可以用CSS来指定这两个值，但如果css尺寸与初始画布的比例不一致，它会出现扭曲，所以官方建议用js来设置 width和height这两个属性。 var canvas = document.getElementById('canvas'); .
canvas的使用方法
weixin_46560512的博客
11-08 3342
    之前学习canvas的时候就觉得canvas和一般的节点有一点不一样，现在重新看了一下，结合大佬们的提示，我又来了自导自演一波，不对的地方还希望大家斧正.     canvas对我来说，是用在web前端和小程序，我接触前端比较少，就主要说一下web方面的吧（小程序直接动态渲染就行）。总体上来说，和一般标签一样，有以下两种方法：     方法一，使用canvas标签+id/class来渲染，其动态变化的实现需要用到getComputedStyle函数，这个函数的用法是，得到初始化的样式 ...
java canvas graphics_android.graphics Canvas基本使用 转
06-09
好的，我可以为您解答关于Java Canvas 和 Android.graphics.Canvas的基本使用。 Java Canvas是一个在awt，swing等GUI框架中用于...以上就是Java Canvas和Android.graphics.Canvas的基本使用方法，希望能对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值