Canvas基础教程(章节2)

最新推荐文章于 2022-05-30 00:22:52 发布
最新推荐文章于 2022-05-30 00:22:52 发布
阅读量2.4k 收藏 2
点赞数 26
分类专栏： Canvas 前端 文章标签： canvas 坐标 填充 圆弧
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45820444/article/details/108909670
版权

  发现一个好玩小技巧，如果浏览器不支持 Canvas 画布怎么办？

在这里插入图片描述
别这样写，太 low 了
试试这个 👇

在这里插入图片描述
哇哦，我学会了。来吧！开始今天的学习内容

渲染上下文

  < canvas>会创建一个固定大小的画布，会公开一个或多个 渲染上下文(画笔)，使用 渲染上下文来绘制和处理要展示的内容。
  我们重点研究 2D渲染上下文。其他的上下文我们暂不研究，比如， WebGL使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。

//获得 2d 上下文对象
var ctx = canvas.getContext (‘2d’);

检测支持性
if(canvas.getContext){
  var ctx = canvas.getContext(‘2d’);
  // drawing code here
}
else{
  // canvas-unsupported code here
}

基本格式：

<html>
<head>
<title>Canvas 基础</title>
<style>
	canvas{
		border: 1px solid black;
	}
</style>
</head>
<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	function draw(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
	}
	draw();
</script>
</html>

先来复习一下上一章的内容：

  如下图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas 元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点来定位。
  所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素距离上边（Y轴）y像素（坐标为（x,y））。后面我们会涉及到坐标原点的平 移、网格的旋转以及缩放等。

在这里插入图片描述
绘制一个简单的矩形。
canvast 提供了三种方法绘制矩形：

1.fillRect(x, y, width, height):绘制一个填充的矩形2.strokeRect(x, y, width, height):绘制一个矩形的边框
3.clearRect(x, y, widh, height):清除指定的矩形区域，然后这块区域会变的完全透明。

这3个方法具有相同的参数。
x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)
width, height：指的是绘制的矩形的宽和高。

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		ctx.fillRect(10,10,100,50);
		//绘制矩形,填充的默认颜色为黑色
		ctx.strokeRect(10,70,100,50);
		//绘制矩形边框
	}()
</script>
</html>

在这里插入图片描述
再添加上这一句：ctx.clearRect(15,15,50,25);
在这里插入图片描述
接下来绘制路径
  图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。每一个路径，甚至一个子路径，都是闭合的。
  1.创建路径起始点
  2.调用绘制方法去绘制出路径
  3.把路径封闭
  4.一旦路径生成，通过描边或填充路径区域来渲染图形。

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

绘制线段：

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		ctx.beginPath();//新建一条path
		ctx.moveTo(50,50);//把画笔移动到指定的坐标
		ctx.lineTo(200,50);//绘制一条从当前位置到指定坐标(200, 50)的直线.
		//闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
		ctx.closePath();
		ctx.stroke();//绘制路径。
	}()
</script>
</html>

绘制三角形边框：

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		ctx.beginPath(); 
		ctx.moveTo(50,50); 
		ctx.lineTo(200,50); 
		ctx.lineTo(200,200);
		ctx.closePath();
		//虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形
		ctx.stroke();//描边。stroke不会自动closePath()
	}()
</script>
</html>

填充三角形：

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		ctx.beginPath(); 
		ctx.moveTo(50,50); 
		ctx.lineTo(200,50); 
		ctx.lineTo(200,200);
		ctx.fill();
		//填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
	}()
</script>
</html>

  卧槽！我电脑一直漏电，我不知道什么原因导致的，我现在手臂麻麻的。我再写两句，如果还是麻麻的我就先不写了，我挺怕死的。

绘制圆弧
目前有两种方法可以绘制圆弧：

1.arc(x, y, r, startAngle, endAngle, anticlockwise)
以(x, y)为圆心，以r为半径，从 startAngle弧度开始到
endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)
注意：
这里的度数都是弧度。
0弧度是指的x轴正方形
radians=(Math.PI/180)*degrees //角度转换成弧度· 1

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

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		ctx.beginPath();
		ctx.arc(50,50,40,0, Math.PI/2,false); 
		ctx.stroke();
	}()
</script>
</html>

在这里插入图片描述
再多画几个

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		ctx.beginPath();
		ctx.arc(50,50,40,0, Math.PI/2,false); 
		ctx.stroke();
		ctx.beginPath();
		ctx.arc(150,50,40,0,-Math.PI/2,true); 
		ctx.closePath();
		ctx.stroke(); 
		ctx.beginPath();
		ctx.arc(50,150,40,-Math.PI/2, Math.PI/2,false); 
		ctx.fill();
		ctx.beginPath(); 
		ctx.arc(150,150,40,0, Math.PI,false); 
		ctx.fill();
	}()
</script>
</html>

在这里插入图片描述
再来一个：

<body>
	<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
	!function(){
		var canvas = document.getElementById('canvas');
		if(!canvas.getContext) return;
		var ctx =canvas.getContext("2d");
		//开始代码draw();
		ctx.beginPath(); 
		ctx.moveTo(50,50);
		//参数1、2：控制点1坐标	参数3、4：控制点2坐标参数5：圆弧半径
		ctx.arcTo(200,50,200,200,100);
		ctx.lineTo(200,200);
		ctx.stroke(); 
		ctx.beginPath(); 
		ctx.rect(50,50,10,10); 
		ctx.rect(200,50,10,10);
		ctx.rect(200,200,10,10);
		ctx.fill();
	}()
</script>
</html>

在这里插入图片描述
arcTo方法的说明：
  这个方法可以这样理解。绘制的弧形是由两条切线所决定。
  第 1 条切线：起始点和控制点1决定的直线。
  第 2 条切线：控制点1 和控制点2决定的直线。
  其实绘制的圆弧就是与这两条直线相切的圆弧。

糟了！手臂麻了，下节讲绘制贝赛尔曲线，读完下一章，你就能绘制下面这幅图：👇

在这里插入图片描述
  本期的 Canvas 教程到这里就告一段落了，这门技术在以后的开发及装 X 中都将大放异彩，勤学苦练使我们熟能生巧，关注一波吧老铁在这里插入图片描述最后送大家三个高级又简单的Canvas 动画，既能练习又能装 X，我是 “ 我不是费圆 ”，一个每天忙到深夜码字的人，我从不轻言放弃，从不吝啬自己的赞美之词。如果你在 canvas 上有着更高的造诣，我希望能得到你的指教。反之，希望你能与我携手并进。

推荐阅读：
线条动画
线条花环
怦然心动

我不是费圆
关注
专栏目录
Canvas基础教程
qq_40312477的博客
07-25 1164
canvas基础使用教程与事件处理
CANVAS 2D详解
qq_46007991的博客
06-14 380
canvas 2D, JS, 图像编辑
canvas的drawImage方法参数详解
热门推荐
编程界明世隐的博客
03-12 3万+
引言： canvas很有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。 一旦获得了源图对象，我们就可以使用drawImage方法将它渲染到 canvas 里。 drawImage方法有三种形态： drawImage(image, dx, dy) 在画布指定位置绘制原图 drawImage(i...
canvas
qq_39406353的博客
08-20 926
canvas基本用法 一、canvas简介 `<canvas>` 是 `HTML5` 新增的，一个可以使用脚本(通常为`JavaScript`)在其中绘制图像的 `HTML` 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 `Canvas`是由`HTML`代码配合高度和宽度属性而定义出的可绘制区域。`JavaScript`代码可以访问该区域，类似于其他通用的二维`API`，通过一套完整的绘图函数来动态生成图形。 二、Canvas基本使用 2.1
canvas入门
王道长的技术博客
09-18 4506
一、canvas 简介 1.1 什么是 canvas？（了解） 是 HTML5 提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆布 画布 Canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。 canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 HTML5 之前的 web 页面
HTML5Canvas基础教程
07-22
资源名称：HTML5 Canvas基础教程内容简介：《HTML5 Canvas基础教程》从HTML5和Javaｓｃｒｉｐｔ(以及jQuery)的基础知识讲起，全面介绍了HTML5 Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复...
HTML 5 Canvas基础教程 源码+PDF
02-25
《HTML 5 Canvas基础教程》从HTML5和JavaScript（以及jQuery）的基础知识讲起，全面介绍了HTML5Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态，以及变形、合成、处理图像和视频等，让...
canvas基础教程
08-10
在这个“canvas基础教程”中，我们将深入探讨Canvas的核心概念和基本操作，以及如何利用JavaScript进行交互式图形设计。 一、Canvas元素 Canvas是一个HTML标签，通过`<canvas>`来创建画布。它的width和height属性...
HTML5 Canvas基础教程源码
10-30
《HTML5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起，全面介绍了HTML5 Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态，以及变形、合成、处理图像和视频等，让...
HTML5-canvas基础教程1.pdf
最新发布
02-24
以上内容是基于给定的 HTML5-canvas基础教程1.pdf 文件中的标题、描述、标签及部分内容提炼出来的知识点概述。通过这些知识点的学习，开发者可以更好地理解和掌握 HTML5 Canvas 的基本用法及其在实际项目中的应用。
Canvas简述---入门理解（1/3）
Shaoyouiqng的博客
06-03 600
来，我们今天聊聊canvas，说到这个canvas，大家是不是感觉都不是很陌生呢，我写的这篇主要是针对入入门选手的朦胧篇。老规矩，我们先了解canvas是个啥玩楞（刚学的） 1、什么是canvas？ canvas通过字面意思是画布的意思，没错就是画布，是HTML5提出的一个方面绘画的工具标签（顿时让我想到一句话：给你一张画板，你想画什么？我反正想画一个长发美女,hhhh）canvas是一个矩形区域，可以支持各中形状，图片，动画的绘制，目前只支持2d绘制，后面会提出3d(估计不错) 2、如何入门canva.
canvas画网格
蒲厷渶と戀的博客
05-30 5778
项目开发过程中，会遇到标尺，标尺的实现可以用d3或canvas，现在简单介绍一下canvas的实现：1、html代码：&lt;canvas id='canvas' width='1800' height='800'&gt;&lt;/canvas&gt;2、css代码：body {     background: #eeeeee; margin: 0; padding: 0; } #...
canvas的getContext对象的方法和属性
weixin_34106122的博客
02-17 1905
1.globalAlpha 属性，设置透明效果functiondraw(){ varctx=document.getElementById('canvas').getContext('2d'); //画矩形 ctx.fillStyle='#FD0'; ctx.fillRect(0,0,75,75); ctx.fillStyle='#6...
canvas写文字，实现过长文本水平垂直居中显示
RubyLinT的博客
06-05 2482
let canvas = document.getElementById('canvas') let ctx = canvas.getContext('2d') ctx.fillStyle = '#fff' #设置字体颜色 ctx.font = 'bold 34px/40px 幼圆' #设置文字粗体 字号 行高 字体 ctx.textBaseline = 'middle' #垂直居中 ctx....
用HTML5的Canvas写字的例子
qjoycn
09-05 399
最近项目轻松了一些，就抱着学习的态度阅读了HTML Canvas 2D Context的内容。又想到以前曾经在android上做过原笔迹手写的内容，就想试着在HTML5中简单做一下看看。摸索着完成了demo。下面是在Google Chrome 13.0版本上的效果。 下面附上代码，仅仅为学习，没做优化，作为例子吧。 &lt;html&gt; &lt;head&gt; &lt;...
Canvas的基本使用
wangwo1991的博客
09-09 3673
在自定义控件特别是自绘控件的时候，都会去重写onDraw方法，就会涉及到Paint和Canvas的使用，前面两篇播客说了下Paint的基本使用，这里说下Canvas的基本使用。Canvas：画布，通俗的说就是一个载体，比如在纸上写字，那么Canvas就类似于纸，Canvas可以绘制直线、点、几何图形、曲线、Bitmap、圆弧等等。Canvas绘制直线//startX X的起点 startY Y的起点
用Canvas写个简单的小游戏
二叉树
06-07 1381
我和其他两位同学在大二的时候一起制作了一个基于Canvas的小游戏作为一门课程的期末大作业，给它取名为PingPing Pang。这篇文档介绍了关于这个游戏基本功能的设计和实现，对游戏的额外改进将在后面一篇文章提到。希望你在阅读本文之前已经掌握了初步的HTML、CSS、JavaScript和Canvas的基本语法规则。 综述： 本游戏（PingPing Pang）是一个通过鼠标点击小球来得分的游戏...
按照我的思路尽可能将canvas基础讲明白
红岸基地
05-30 560
写在前面 canvas很多人写过，我之前的博客里面也写过关于canvas的教程，但是后面我觉得其实不太好，因为很多东西都是很模糊的，没有非常直观清晰的将canvas讲解明白，究其原因，还是这个属性使用的不够多，导致很多属性不够熟练，但是我希望这篇文章可以将这个属性彻底的讲明白，毕竟只是一个标签而已，怎么讲都不会太复杂，他之所以不太好学原因就在于他自带的方法太多，加上很多的效果都是需要方法之间的相互配合使用，所以难度和复杂度就直接升高了很多，它不像html的其他标签一样，比如p、span等都只是自带了一些样
HTML5 Canvas基础教程：JavaScript绘图入门
HTML5 Canvas 入门基础教程 Canvas是HTML5引入的一种强大的图形绘制技术，它允许开发者通过JavaScript脚本来在网页上创建动态图形、图表、图像合成或简单的动画效果。Canvas元素与传统的元素类似，但有明显的区别：...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我不是费圆

文章都是免费开源的，不用打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值