Canvas 详细教程(一)

最新推荐文章于 2024-08-05 16:35:45 发布
最新推荐文章于 2024-08-05 16:35:45 发布
阅读量1.2k 收藏 10
点赞数 3
分类专栏： Canvas 文章标签： canvas html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41974199/article/details/106950084
版权

Canvas 详细教程(一)

文章目录

1：基本用法

<canvas id="canvas"></canvas>

初始化宽度：300
初始化高度：150

canvas起初是空白的，我们可以添加边框并查看。

<style>
	canvas{
		border:1px solid black;
	}
</style>

在这里插入图片描述

2：获取 Canvas DOM 对象

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

检查浏览器的支持性：

	var canvas = document.getElementById('canvas');
	if (canvas.getContext){
		var ctx = canvas.getContext('2d');
	} else {
		//不支持
	}

3：绘制矩形

fillRect(x, y, width, height);
  • x,y：起始点 x 坐标，y 坐标
  • width,height：矩形的宽度和高度

阴影：

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.fillRect(25, 25, 100, 100);
			
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述
清除：

clearRect(x, y, width, height);
  • x,y：起始点 x 坐标，y 坐标
  • width,height：矩形的宽度和高度
	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.fillRect(25, 25, 100, 100);
			ctx.clearRect(45, 45, 60, 60);
			
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述

边框：

strokeRect(x, y, width, height);
  • x,y：起始点 x 坐标，y 坐标
  • width,height：矩形的宽度和高度
	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.strokeRect(25, 25, 100, 100);
			
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述

4：绘制路径

方法描述
beginPath()新建路径
closePath()闭合路径
stroke()通过线条来绘制图形轮廓。
fill()填充路径的内容区域

画一条线：

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.beginPath();
			ctx.moveTo(10,10);
			ctx.lineTo(80,80);
			ctx.stroke();
			
		} else {
			//不支持
		}
	}
	draw();

当调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（）

在这里插入图片描述
绘制一个三角形：

调用 closePath() 进行闭合，如果已经闭合，该函数则什么都不会做。

			ctx.beginPath();
			ctx.moveTo(10,10);
			ctx.lineTo(80,80);
			ctx.lineTo(130,30);
			ctx.closePath();
			ctx.stroke();

在这里插入图片描述
填充三角形：

			ctx.beginPath();
			ctx.moveTo(10,10);
			ctx.lineTo(80,80);
			ctx.lineTo(130,30);
			ctx.closePath();
			ctx.stroke();
			ctx.fill();

在这里插入图片描述

5：圆弧

绘制圆弧或者圆，我们使用arc()方法

arc(x, y, radius, startAngle, endAngle, anticlockwise)
参数描述
x圆心 x 坐标
y圆心 y 坐标
radius圆的半径
startAngle开始点
endAngle结束点
anticlockwisefalse:顺时针 / true:逆时针

绘制圆：

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.beginPath();
			ctx.arc(50, 50, 30, 0, 2 * Math.PI, false);
			ctx.stroke();
			
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述
绘制半圆：

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

在这里插入图片描述

6：二次贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)
  • cp1x,cp1y：控制点
  • x,y：结束点

在这里插入图片描述

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			// 二次贝塞尔曲线
			ctx.beginPath();
			ctx.moveTo(20, 100);
			ctx.quadraticCurveTo(100, 30, 180, 100);
			ctx.stroke();
			
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述

在这里插入图片描述

7：三次贝塞尔曲线

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
  • cp1x,cp1y：控制点 1
  • cp2x,cp2y：控制点 2
  • x,y：结束点
    在这里插入图片描述
	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			//三次贝塞尔曲线
			ctx.beginPath();
			ctx.moveTo(20, 100);
			ctx.bezierCurveTo(70, 30, 70, 20, 180, 100);
			ctx.stroke();
			
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述
在这里插入图片描述

8：色彩

方法描述
fillStyle设置图形的填充颜色。
strokeStyle设置图形轮廓的颜色。
	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.strokeStyle = "#ed3f14"
			ctx.strokeRect(25, 25, 100, 100);
			
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述

			ctx.fillStyle = "#ed3f14"
			ctx.fillRect(25, 25, 100, 100);

在这里插入图片描述

9：透明度

方法描述
globalAlpha这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。
	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.fillStyle = "#ed3f14"
			ctx.fillRect(25, 25, 100, 100);
			ctx.globalAlpha = 0.2
			ctx.fillStyle = "#19be6b"
			ctx.fillRect(25, 25, 50, 50);
			
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述

10：线型样式

方法描述
lineWidth线条宽度
lineCap线条末端样式
lineJoin线条与线条间接合处的样式
miterLimit限制当两条线相交时交接处最大长度
getLineDash()返回一个包含当前虚线样式，长度为非负偶数的数组
setLineDash(segments)设置当前虚线样式
lineDashOffset设置虚线样式的起始偏移量

lineWidth ：线条宽度

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.lineWidth = 1;
			ctx.beginPath();
			ctx.moveTo(5,30);
			ctx.lineTo(140,30);
			ctx.stroke();
			ctx.lineWidth = 5;
			ctx.beginPath();
			ctx.moveTo(5,60);
			ctx.lineTo(140,60);
			ctx.stroke();
			
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述
lineCap：线条末端样式

  • butt（默认）
  • round
  • square
	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.lineWidth = 8;
			ctx.lineCap = "butt";
			ctx.beginPath();
			ctx.moveTo(5,30);
			ctx.lineTo(140,30);
			ctx.stroke();
			ctx.lineWidth = 8;
			ctx.lineCap = "round";
			ctx.beginPath();
			ctx.moveTo(5,60);
			ctx.lineTo(140,60);
			ctx.stroke();
			ctx.lineWidth = 8;
			ctx.lineCap = "square";
			ctx.beginPath();
			ctx.moveTo(5,90);
			ctx.lineTo(140,90);
			ctx.stroke();
			
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述
lineJoin： 线条与线条间接合处的样式

  • round（默认）
  • bevel
  • miter
	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.lineWidth = 8;
			ctx.lineJoin = "round";
			ctx.beginPath();
			ctx.moveTo(5,30);
			ctx.lineTo(30,60);
			ctx.lineTo(55,30);
			ctx.stroke();
			ctx.lineWidth = 8;
			ctx.lineJoin = "bevel";
			ctx.beginPath();
			ctx.moveTo(5,60);
			ctx.lineTo(30,90);
			ctx.lineTo(55,60);
			ctx.stroke();
			ctx.lineWidth = 8;
			ctx.lineJoin = "miter";
			ctx.beginPath();
			ctx.moveTo(5,90);
			ctx.lineTo(30,120);
			ctx.lineTo(55,90);
			ctx.stroke();
			
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述
miterLimit：限制当两条线相交时交接处最大长度

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
			ctx.lineWidth = 8;	
			ctx.lineJoin = "miter";
			ctx.beginPath();
			ctx.moveTo(5,30);
			ctx.lineTo(30,60);
			ctx.lineTo(55,30);
			ctx.stroke();
			ctx.lineWidth = 8;	
			ctx.lineJoin = "miter";
			ctx.miterLimit = 1;
			ctx.beginPath();
			ctx.moveTo(5,60);
			ctx.lineTo(30,90);
			ctx.lineTo(55,60);
			ctx.stroke();
			
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述
setLineDash：置当前虚线样式
lineDashOffset：设置虚线样式的起始偏移量

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
		    ctx.setLineDash([4, 2]);
		    ctx.lineDashOffset = -0;
			ctx.strokeStyle = "#2d8cf0"
		    ctx.strokeRect(10,10, 100, 100);
			
		    ctx.setLineDash([2, 2]);
		    ctx.lineDashOffset = -5;
			ctx.strokeStyle = "#19be6b"
		    ctx.strokeRect(30,30, 100, 100);
			
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述

11：渐变

createLinearGradient(x1, y1, x2, y2)
  • x1,y1：渐变的起点
  • x2,y2：渐变的终点
addColorStop(position, color)
  • position：参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。（0.5为正中间）
  • color：有效的 CSS 颜色值
	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
		    var lineargradient = ctx.createLinearGradient(0,0,150,150);
			lineargradient.addColorStop(0,'#ed3f14');
			lineargradient.addColorStop(1,'#ff9900');
			ctx.fillStyle = lineargradient;
			ctx.fillRect(0,0,150,150)
						
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述

createRadialGradient(x1, y1, r1, x2, y2, r2)
  • x1,y1,r1：以 x1,y1 为原点，半径为 r1 的圆。
  • x2,y2,r2：以 x2,y2 为原点，半径为 r2 的圆。
	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
		    var radgrad = ctx.createRadialGradient(30,30,30,30,30,15);
		    radgrad.addColorStop(0, 'white');
			radgrad.addColorStop(0.5, '#ff9900');
		    radgrad.addColorStop(1, '#ed3f14');
			ctx.fillStyle = radgrad;
			ctx.fillRect(0,0,150,150)
						
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述

12：图案样式

createPattern(image, type)
  • image：可以是一个 Image 对象的引用，或者另一个 canvas 对象。
  • type：repeat，repeat-x，repeat-y 和 no-repeat。
方法描述
repeat垂直和水平重复背景图像。如果最后一张图像不合适，将对其进行裁剪
repeat-x背景图像仅水平重复
repeat-y背景图像仅垂直重复
no-repeat背景图像不重复。图片只会显示一次

与 drawImage 有点不同，你需要确认 image 对象已经装载完毕，否则图案可能效果不对。

使用 Image 对象的 onload handler 来确保设置图案之前图像已经装载完毕

	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
		    // 创建新 image 对象
		    var img = new Image();
		    img.src = "./test.png"
		    img.onload = function() {

			// 创建图案
			var pattern = ctx.createPattern(img, 'repeat');
				ctx.fillStyle = pattern;
				ctx.fillRect(0, 0, 300, 150);
		    }
						
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述

13：阴影

方法描述
shadowOffsetX设定阴影在 X 轴的延伸距离，负值表示阴影会往左延伸，正值则表示会往右延伸。（默认值：0）
shadowOffsetY设定阴影在 Y 轴的延伸距离，负值表示阴影会往上延伸，正值则表示会往下延伸。（默认值：0）
shadowBlur设定阴影的模糊程度。（默认值：0）
shadowColor设定阴影的颜色。（默认全透明黑色）
	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
		    ctx.shadowOffsetX = -5;
		    ctx.shadowOffsetY = 5;
		    ctx.shadowBlur = 3;
		    ctx.shadowColor = "#495060";
			ctx.strokeRect(30,30,50,50)
						
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述

14：绘制文本

fillText(text, x, y [, maxWidth])
  • text：文本内容
  • x,y：在 x,y 位置填充指定的文本
  • maxWidth：绘制的最大宽度
strokeText(text, x, y [, maxWidth])
  • text：文本内容
  • x,y：在 x,y 位置绘制文本边框
  • maxWidth：绘制的最大宽度
	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
		    ctx.font = "48px serif";
			ctx.fillText("Hello world", 15, 50);
			
			ctx.font = "48px serif";
			ctx.strokeText("Hello world", 15, 100);
						
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述

方法描述
font绘制文本的样式（默认字体：10px sans-serif）
textAlign文本对齐选项，start, end, left, right 或 center（start）
textBaseline基线对齐选项，top, hanging, middle, alphabetic, ideographic, bottom（默认值：alphabetic）
direction文本方向，ltr, rtl, inherit（默认值：inherit）
	function draw(){
		var canvas = document.getElementById('canvas');
		if (canvas.getContext){
			var ctx = canvas.getContext('2d');
			
		    ctx.font = "38px 'Lucida Console', Monaco, monospace";
			ctx.fillStyle = "#2d8cf0"
			ctx.fillText("Hello world", 15, 50);
						
		} else {
			//不支持
		}
	}
	draw();

在这里插入图片描述
测量文本宽度：

measureText()
  • measureText()：将返回一个 TextMetrics对象的宽度、所在像素等属性。
		    ctx.font = "38px 'Lucida Console', Monaco, monospace";
			ctx.fillStyle = "#2d8cf0"
			ctx.fillText("Hello world", 15, 50);
			var text = ctx.measureText("Hello world");
			console.log(text.width); // 251;
一拖再拖 一拖再拖
关注
专栏目录
canvas教程
08-16
Canvas 教程 本资源提供了详细的 canvas 使用技巧和相关技术阐述，对于初涉 JavaScript 和 canvas 相关技术的朋友有极大地帮助。 canvas 是新的 HTML 元素，可以通过 Script（通常是 JavaScript）绘制图形，用于...
web前端基础入门教程之HTML5 Canvas详细解读
01-08
HTML5 Canvas 是一种强大的网页图形绘制工具，它允许开发者通过JavaScript进行动态的、基于脚本的二维绘图。这个技术的引入为Web开发带来了丰富的视觉效果和交互性，尤其适用于数据可视化、游戏开发以及复杂的用户...
canvas详细入门教程（1W字 吐血分享）
热门推荐
nvgis的博客
10-14 3万+
canvas入门必看教程，学完可绘制动画！
canvas初学笔记（万字详细版）
最新发布
懒羊羊大王的博客
08-05 916
canvas初学笔记，万字超详细版（附带实战源码）
Canvas[详解] —— 一篇教你学会Canvas和如何快速绘制图形
Lan_0316的博客
04-20 4163
Canvas是HTML5中的一个标签，用于在网页上动态生成图像和图形。
canvas基础简单易懂教程（完结，多图）
forever
03-02 1908
Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 Canvas API 主要聚焦于 2D 图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。
最【通俗易懂】的 canvas 入门教程（多图预警）
wll_web的博客
04-11 2228
canvas画布 canvas画布的宽度与高度 canvas 标签只有两个常用的标签属性：width 和 height。 当没有设置宽度和高度的时候，canvas 会初始化成宽300px，高150px的画布。 使用 html 属性设置 width，height 时，只影响画布本身，不影响画布内容。 通过 css 样式指定 canvas 的 width，height 时，不但影响画布本身的宽高，还会使画布中的内容等比例缩放（缩放参照画布默认的尺寸）。 <!-- 不要通过样式指定宽高 --> &lt
【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！
weixin_55846296的博客
06-09 1万+
前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、 还原坐标系2、 绘制背景3、 绘制时钟指针4、循环绘制。
canvas draw
每天都是人生巅峰
08-26 1757
// 鼠标点击canvas获取图片坐标 function convertPoint (canvasPoint){ canvasPoint=canvasPoint.subtract( Vector.create(imgConfig.translate) ) var left=(config.canvasW-imgConfig.width)/2; var top=(config.canvasH-imgConfig.height)/2; var clientOff=Vector.create([left,to
canvas-绘图（鼠标按下 绘制 抬起 结束）
weixin_47295886的博客
07-22 974
canvas,pen;画布画笔画图的设置
Canvas——路径绘制
mantou_riji的博客
01-13 1579
原因：因为绘制好空心长方形之后没有 ”抬笔“ ，就会认为空心长方形和后面绘制的长方形是一个图案，填充的时候就会一起填充。canvas最重要的就是画笔，可以通过画笔上的属性和方法绘制出不同样式的各种图形。，使用path2D创造出路径之后，直接在路径上进行画画。canvas就是一个画板，可以使用canvas在页面上画出想要的图形。fill的原理：取画笔的起点和终点进行连接，形成闭合图形再进行填充。绘制原理：三点一半径进行圆弧绘制。canvas是一个画板，我们可以在画板上绘制。就可以进行图像的绘制。
小程序绘制之CanvasContext
软考鸭
08-19 6104
一、全局 1、draw CanvasContext.draw(boolean reserve, function callback) reserve:本次绘制是否接着上一次绘制。即 reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制；若 reserve 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认 false。 绘制完成后执行的回调函数 示例： const ctx = wx.createCanvasC
微信小程序开发—(八)canvas绘制图形
oshan2012的博客
02-22 2526
一.小知识 (1).API接口 (2).context 对象的方法列表 二.步骤 wxml中： <canvas canvas-id="myCanvas" class="myCanvas" ></canvas> 在js文件onLoad: function() {}的方法中开始编写代码 1.创建一个 Canvas 绘图上下文 CanvasCon...
canvas基础学习（二）
aiyaya2016的博客
11-25 437
一、图像绘制 canvas绘制图像的方法是ctx.drawImage();该方法有三种使用方式 1、ctx.drawImage(img,x,y); img是指图像对象，x和y分别是这个图像左上角在canvas画布的坐标，而图像显示的大小为图像本身的像素值，超出canvas画布的部分不显示。 2、ctx.drawImage(img,x,y,w,h); 和上面的那个函数相比，可以控...
canvas 知识总结（一）
weixin_46828094的博客
11-08 945
canvas 知识点总结（一）
前端实现电子签名（web、移动端）通用
公众号 @ 桃小瑞
12-07 3419
在现在的时代发展中，从以前的手写签名，逐渐衍生出了电子签名。电子签名和纸质手写签名一样具有法律效应。电子签名目前主要还是在需要个人确认的产品环节和司法类相关的产品上较多。举个常用的例子，大家都用过钉钉，钉钉上面就有电子签名，相信大家这肯定是知道的。那作为前端的我们如何实现电子签名呢？其实在中已经出现了一个重要级别的辅助标签，是啥呢？那就是canvas。是在中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用操作的。 对象表示一个 画布元素 -。它没有自己的行为，但是定义了一个 A
微信小程序canvas实现刮刮乐详细教程
以下是一份详细的知识点解析： 1. **微信小程序环境**： 微信小程序是腾讯推出的一种轻量级的应用开发框架，允许开发者在微信平台上构建原生体验的应用，无需安装即可使用。它提供了丰富的API接口，包括对canvas的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

一拖再拖 一拖再拖

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值