Canvas[详解] —— 一篇教你学会Canvas和如何快速绘制图形

最新推荐文章于 2024-05-29 11:16:42 发布
最新推荐文章于 2024-05-29 11:16:42 发布
阅读量2.4k 收藏 17
点赞数 17
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lan_0316/article/details/137989065
版权

文章目录

前言

在这里插入图片描述
Canvas是HTML5中的一个标签，用于在网页上动态生成图像和图形。

一、Canvas是什么？

Canvas是一种HTML元素，用于动态生成图形、动画和其他视觉效果。Canvas提供了一组API，使开发者可以使用JavaScript绘制各种图形，如矩形、圆形、线条和图片等，同时还可以进行动画、交互和数据可视化等操作。
Canvas的工作原理是在HTML页面中创建一个空白的画布，然后使用JavaScript代码将图形和其他元素绘制到画布上。
Canvas具有高度的灵活性和可扩展性，可以用于创建游戏、图表、数据可视化和各种交互式应用程序等。

二、使用方法：

1.先得到画布对象

	var can = document.querySelector("#can");
	var ctx = can.getContext('2d');

2.画图流程

1.绘画路线

	开始绘画 ctx.beginPath()
	确定要绘制的起点 ctx.moveTo(x,y)
	确定经过点... ctx.lineTo(x,y);
	确定要绘制的终点 ctx.lineTo(x,y);
	路径绘制结束 ctx.closePath(); （关闭路径，将终点与起点链接起来）

2.设置画笔

确定画笔的样式，使用设置好的画笔描边或者填色

ctx.fillStyle = "red" //确定填充的颜色,默认值是黑色
ctx.fill(); //开始填充

ctx.lineWidth = 8;//确定描边宽度
ctx.strokeStyle = 'blue';//描边颜色
ctx.stroke();//开始描边

三、快速绘制常见图形

1.快速绘制矩形：

ctx.rect(x,y,w,h) // 确定路径 x,y 起始坐标 w,h 宽高		
ctx.strokeRect(x,y,w,h); // 确定路径并描出来
ctx.fillRect(x,y,w,h); // 确定路径并填充出来

2.快速绘制圆形：

ctx.arc(x,y,r,sa,ea,true/false)：
x、y为圆心坐标，r为半径，
sa、ea分别为起始角度和结束角度，
true是逆时针画圆，false是顺时针画圆；

角度计算公式：
360度角即2PI弧度；
1度就是2PI/360=PI/180弧度；
90度就是2PI/360*90=PI/2弧度(其他的角度自行计算)

3.贝塞尔曲线

开始点通过moveTo去做

二次贝塞尔曲线

	ctx.quadraticCurveTo (cx,cy,ex,ey)
	cx,cy 控制点坐标
	ex,ey 结束点坐标

示例：

<style>
    #can{
         background-color: rgb(235, 239, 243);
     }
</style>
<body>
    <canvas id="can" width="200" height="200"></canvas>
</body>
<script>
    var can=document.querySelector('#can')
    var ctx=can.getContext('2d')
    ctx.beginPath();//开始绘图
    ctx.moveTo(10,10);//开始点
    ctx.quadraticCurveTo (100,150,150,10);//控制点和结束点
    ctx.stroke();//把路线描绘出来
</script>

成品：
在这里插入图片描述

三次贝塞尔曲线

	bezierCurveTo (cx1,cy1,cx2,cy2,ex,ey);

示例：

<style>
	#can{
		background-color: #eee;
	}
</style>
<body>
	<canvas width="500" height="400" id="can"></canvas>
</body>
<script>
	var can = document.querySelector('#can')
	var ctx = can.getContext('2d');
	ctx.beginPath();//开始绘图
	ctx.moveTo(250,50);//开始点
	ctx.bezierCurveTo(450,125,50,275,250,350);//控制点和结束点
	ctx.stroke();//把路线描绘出来
</script>

成品：
在这里插入图片描述

四、在画布绘制文字

1. 填充绘制

	fillText(text,x,y,maxWidth):
	text表示文字      x、y为坐标
	maxWidth可选，为文字最大宽度，防止文字溢出

2. 描边绘制

	strokeText(text,x,y,maxWidth):
	text表示文字      x、y为坐标
	maxWidth可选，为文字最大宽度，防止文字溢出；

3. 字体样式设置

	ctx.font = "bold 40px Arial" ;//文字粗细、大小、字体样式
	ctx.textAlign = "left | center | right";//居中方式
	对齐方式：
	ctx.textBaseline = "top | middle | bottom"
	top: 四线格的最顶部线对齐起始点！
	middle: 四线格的中间位置对齐起始点
	bottom： 四线格的底部对齐起始点

五、图形组合

ctx.globalCompositeOperation = "某一种方式"
	source-over：默认值，表示新图覆盖在旧图之上
	source-atop：只绘制旧图和重叠的部分，其他透明
	source-in：只绘制新图的重叠部分，其他透明
	source-out：只绘制新图，重叠部分和旧图透明
	destination-over：表示旧图覆盖在新图之上
	destination-atop：只绘制新图和重叠的部分，其他透明
	destination-in：只绘制旧图的重叠部分，其他透明
	destination-out：只绘制旧图，重叠部分和新图透明
	lighter：旧图与新图都绘制，重叠部分混色处理
	xor：旧图和新图重叠处做透明处理
	copy：只绘制新图形，不绘制旧图形

六、图形阴影

ctx.shadowColor = "red";//阴影颜色
ctx.shadowBlur = 10；//阴影模糊度
ctx.shadowOffsetX = 10;//阴影X轴距离
ctx.shadowOffsetY = 10;//阴影Y轴距离

示例：

<style>
	#can{
		background-color: #eee;
	}
</style>
<body>
	<canvas width="900" height="600" id="can"></canvas>
</body>
<script>
	var can = document.querySelector('#can')
	var ctx = can.getContext("2d");
	
	ctx.beginPath();
	ctx.arc(100,100,50,0,2*Math.PI,false);
	ctx.fillStyle="teal"
	
	ctx.shadowColor = "red";//阴影颜色
	ctx.shadowBlur = 15；//阴影模糊度
	ctx.shadowOffsetX = 10;//阴影X轴距离
	ctx.shadowOffsetY = 10;//阴影Y轴距离

	ctx.fill();
</script>

效果：
在这里插入图片描述

七、图形的绘制

  1. ctx.drawImage(imgage对象,x,y)
  2. ctx.drawImage(imgage对象,x,y,w,h)
    w,h 以压缩方式设置图形的宽高
  3. ctx.drawImage(imgage对象,x,y,w,h,rx,ry,rw,rh)
    x,y 图片上的坐标
    w,h 要裁剪的宽高
    rx,ry 画布上的坐标
    rw,rh 要显示的图片的宽高

示例代码：

<style>
	#can{
		background-color: #eee;
	}
</style>
<body>
	<canvas width="300" height="300" id="can"></canvas>
</body>
<script>
	var can = document.querySelector('#can')
	var ctx = can.getContext("2d");

	ctx.beginPath();
	// 先把图片对象创建出来
	var image = new Image();
	image.src = '../img/6.jpg';

	image.onload = function(){
		ctx.drawImage(image,150,180,100,100,50,50,100,100);
	}
</script>

效果：
在这里插入图片描述

八、图片平铺

ctx.createPattern(图片对象,“平铺方式”);
平铺方式： repeat 完全平铺、 repeat-x/y 、 no-repeat；
示例代码：

<style>
	#can{
		background-color: #eee;
	}
</style>
<body>
	<canvas width="300" height="300" id="can"></canvas>
</body>
<script>
	var can = document.querySelector('#can')
	var ctx = can.getContext("2d");
	ctx.beginPath();
	// 先把图片对象创建出来
	var image = new Image();
	image.src = '../img/3.png';

	image.onload = function(){
		var pat = ctx.createPattern(image,"repeat-x");
		ctx.fillStyle = pat;
		ctx.fillRect(50,50,200,100);
	}
</script>

九、画布裁剪

ctx.drawImage(图片对象,x,y);//x,y图片开始裁剪位置坐标
示例代码：

<style>
	#can{
		background-color: #eee;
	}
</style>
</head>
<body>
	<canvas width="900" height="600" id="can"></canvas>
</body>
<script>
	var can = document.querySelector('#can')
	var ctx = can.getContext("2d");

	ctx.beginPath();
	ctx.rect(100,100,200,200);
	ctx.clip();
	// 先把图片对象创建出来
	var image = new Image();
	image.src = '../img/1.jpg';

	image.onload = function(){
		ctx.drawImage(image,0,0)
	}
</script>

十、画布变形

  1. scale(w,h) 画布缩放
    w宽度上的缩放 h高度上的缩放
  2. rotate(度数) 画布旋转
    1度就是 Math.PI/180
    旋转的中心点事画布的左上角，正度数是顺时针旋转
  3. translate(x,y) 画布中心点偏移(原来的中心点：0 0)
    x y 新的中心点坐标

十一、画布存档

  1. save() 保存当前的画布状态
  2. restore() 回退到上一次保存的状态

十二、清除画布

  1. ctx.clearRect(x,y,w,h);

  2. 清除整个画布：
    ctx.clearRect(0,0,标签.width,标签.height);

-Food流油
关注
  • 17
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
01-21
HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。 好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。 1、使用Canvas绘制直线：   XML/HTML Code复制内容到剪贴板 <!doctype html>   <html>       <head>           <meta charset=UTF-8>       </head>       <style type=text/css>    
canvas 详解 —— 绘制篇
qq_42880714的博客
07-22 8336
canvas 详解 —— 绘制篇
uniapp通过Canvas绘制网格（心电图，坐标纸等可用）
最新发布
Agont_的博客
05-29 901
通过这段代码，可以将网格的外边距取消，并且将网格的背景颜色改成黑色(或者其他颜色自己喜欢就好)，通过这种改变DIV的背景颜色实现对网格添加背景颜色的方法，有利于我们之后在心电图操作中“显示/隐藏”网格的操作选项。所需要的高级网格需要三种大小的网格，分别为大、中、小，这三种网格需要被同时调用执行，故专写一个函数来共同调用三种大小的绘制函数。我之前文档内的心电图同款网格只需要将小型网格和大型网格函数删除，并且在总函数内，删除对这两个函数的调用即可。同时，将网格的颜色改变，即可实现我之前文档中的心电图同款网格。
①万字《详解canvas api画图》小白前端入门教程（建议收藏）
2401_84093973的博客
04-05 719
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
【HTML5】 canvas 绘制图形
qq_45677671的博客
01-15 2718
使用 canvas 绘制图形用法详解
HTML5 Canvas绘制图形从入门到精通
qq_58626489的博客
02-26 1416
canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。 标记和 SVG以及 VML 之间的一个重要的不同是， 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持, Internet Explorer 从 IE9 开始。Chrome 和 Opera 9+ 也支持。
Java 通过Canvas实现绘图功能.rar
07-10
Java 通过Canvas实现绘图功能源代码，可以画出直线、矩形、圆角矩形、三角形、文字等，把缓冲区图像的内容绘制到画布上，重载抽象类MIDlet的抽象方法startApp()，重载抽象类MIDlet的方法destroyApp()，Java Canvas绘图程序，新手必看代码。
Canvas绘图基础
热门推荐
幺妹儿儿的博客
03-17 1万+
目录 一、什么是Canvas？ 二、Canvas元素的定义（写在html文件的body中） 三、使用JavaScript获取网页中的Canvas对象 四、Canvas绘图 （1）绘制直线 （2）绘制矩形 （3）绘制圆弧 （4）填充和描边 一、什么是Canvas？ canvas就是画布，可以画线，图形，填充，图像绘制等操作。 canvas不仅提供简单的二维矢量绘图，也提供三维绘图。 二、Canvas元素的定义（写在html文件的body中） <canvas id=“myCa
canvas详解01-绘制基本图形
大雾起了清晨
06-23 3465
既然我们已经设置了 canvas 环境，我们可以深入了解如何在 canvas 上绘制。到本文的最后，你将学会如何绘制矩形，三角形，直线，圆弧和曲线，变得熟悉这些基本的形状。绘制物体到 Canvas 前，需掌握路径，我们看看到底怎么做。
canvas 绘制图片
huaweichenai的博客
12-31 9105
前面我们了解了canvas的一些基本使用方法，在canvas中我们还可以在canvas中直接绘制图片，在canvas中绘制图片主要使用到drawImage方法 一：drawImage方法参数有三中情况 1：三个参数 ctx.drawImage(image,dx,dy) image：需要绘制的img图片 dx,dy：绘制的img图片在canvas中的坐标(x,y) 2：五个参数 c...
canvas 画图
一站到底s的博客
04-26 1952
Canvas绘图有三个基本要素：Canvas、绘图坐标系以及Paint *Canvas是画布，我们通过Canvas的各种drawXXX方法将图形绘制到Canvas上面， *在drawXXX方法中我们需要传入要绘制的图形的坐标形状， *还要传入一个画笔Paint Canvas坐标系与绘图坐标系 Canvas绘图中牵扯到两种坐标系：Canvas坐标系与绘图坐标系。 Canvas坐标系...
详解微信小程序——自定义圆形进度条
08-31
4. **Canvas绘制与更新**： 绘制完成后，使用`draw()`方法将画布上的内容呈现到页面上。在实际应用中，如果需要动态更新进度条，可以在适当的时间调用`draw()`，如在数据改变或特定事件触发时。 5. **页面布局与...
BaiduIFE-王牌特工（基于Canvas的HTML5小游戏）.zip
02-13
- 绘制图形：Canvas API提供了丰富的绘图方法，如`fillRect()`画矩形，`beginPath()`开始路径，`arc()`画圆弧，`stroke()`描边，`fill()`填充等。 2. **游戏框架搭建** - 游戏循环：游戏的核心是游戏循环，通常...
canvas-path-animation-demos:【:artist_palette:万物皆可动】详解Canvas路径动画
05-24
前言好久不见，我是Channing因为最近事情比较多，很抱歉已经两个月没有写新文章了这几天终于有机会也因为工作上的一些灵感于是肝下这篇文章分享给大家希望能对你有一定的启发或帮助:folded_hands:拥有了强大的Canvas，...
canvas-tetris:HTML5 画布中的俄罗斯方块游戏
06-16
开发者可以通过阅读和理解源代码，了解如何在Canvas上绘制图形、处理用户输入以及实现游戏逻辑。同时，该项目还可以作为进一步开发的基础，例如添加音效、高分系统、多人对战模式等。 总之，canvas-tetris展示了...
canvas-circle-physics-play:在画布上绘画时使用物理进行的简单实验
05-09
本篇文章将深入探讨一个基于JavaScript的实验项目——"canvas-circle-physics-play"，该项目旨在通过物理原理在HTML5画布上实现动态的圆形运动。 首先，让我们了解项目的基础环境配置。要运行此项目，你需要在本地...
Canvas—2D 绘图
青蛙king的博客
06-09 4898
HTML5 中 新增了 <canvas> 元素。 <canvas> 元素负责在页面中设定一个区域，然后就可以通过 JavaScript 动态的在这个区域内绘制图形。
canvas绘制图片的三种方法（图文示例）
大剑师兰特的GIS世界
01-16 2413
如何使用canvas来绘制图片呢？这里有三种方法。 语法： drawImage(image, dx, dy) drawImage(image, dx, dy, dWidth, dHeight) drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
图形绘制canvas
你还有我
04-06 2211
图形绘制canvas
java canvas详解_[Java教程]初学 Canvas 第一篇
06-08
好的，我可以为你详细介绍 Java 中的 Canvas。 Canvas 是 Java 中的一个基础类，用于在屏幕或其他设备上绘制图形。它提供了一系列的方法和属性，可以帮助我们创建出各种形状和图像，并且可以操作这些图形和图像。 在使用 Canvas 前，需要先创建一个 Canvas 对象。我们可以通过继承 Canvas 类来创建一个自定义的 Canvas 对象，并且在这个对象中重写一些方法来实现我们的需求。例如，我们可以重写 paint() 方法，在其中绘制出我们需要的图形。 在绘制图形时，我们可以使用 Graphics2D 对象来进行操作。Graphics2D 是 Java 2D 中的一个强大的绘图工具，它提供了许多方法来绘制各种形状和图像，例如 drawLine()、drawRect()、drawImage() 等等。 除了绘制图形，Canvas 还可以处理鼠标和键盘事件。我们可以重写 Canvas 中的一些方法来实现这些功能，例如 mousePressed()、mouseReleased()、keyPressed()、keyReleased() 等等。 总的来说，Canvas 是 Java 中一个非常有用的类，它可以帮助我们实现各种绘图和事件处理的功能。如果想要深入了解 Java 中的 Canvas，建议可以查看 Java 2D 相关的文档和教程。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值