HTML5-canvas标签结合简单实例讲解

最新推荐文章于 2024-07-19 23:42:48 发布
最新推荐文章于 2024-07-19 23:42:48 发布
阅读量1.4k 收藏 2
点赞数 2
分类专栏： HTML 文章标签： HTML5 CANVAS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37120167/article/details/80847749
版权

关于Canvas的简单介绍

<canvas>元素是HTML5中的新元素，该标签只是图形容器，需要使用脚本语言来绘制图形。

 

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 元素.

注意: Internet Explorer 8 及更早 IE 版本的浏览器不支持 <canvas> 元素.

 

创建一个简单的画布

【源代码】

<!DOCTYPE html>
<html>
<head>
	<title>canvas</title>
	<meta charset="utf-8">
	<style type="text/css">
.ca{
	border:1px solid #008B8B;
}

	</style>
</head>
<body>
<canvas id="myCanvas-color" width="250" height="150" class="ca">
	<!-- id属性比写且唯一；
     width和height不写也可以显示，如果对其有要求是要写的；
     canvas默认没有边框样式，需要设置才能看见边框范围，
     通过实践发现它不是块级元素，因为它不独占一行。 -->
</canvas>

<script type="text/javascript">

		var cvsc = document.getElementById("myCanvas-color"); //获取画布id为myCanvasvar 
		var ctxc = cvsc.getContext('2d');//获取绘图2D环境
		ctxc.fillStyle = "#008B8B";//不写这句，会默认显示黑色
		ctxc.fillRect(20,20,200,100);//必须有，fillRect(x,y,width,height)方法定义了矩形当前的填充方式
		//其中x表示“矩形x坐标”；
		//y表示“矩形y坐标”；
		//width为矩形的宽；
		//height为矩形的高；
	
	</script>
</body>
</html>

【效果图】

 

 

【知识点】

fillStyle 属性设置或返回用于填充绘画的颜色、渐变或图案。

 

值描述
color指示绘图填充色的 CSS 颜色值。默认值是 #000000。
gradient用于填充绘图的渐变对象（线性或 放射性）。
pattern用于填充绘图的 pattern 对象。

 

 

Canvas - 渐变

下面是线性渐变简单实例

 

 

【源代码】

<!DOCTYPE html>
<html>
<head>
	<title>canvas</title>
	<meta charset="utf-8">
	<style type="text/css">
.ca{
	border:1px solid #008B8B;
}

	</style>
</head>
<body>
<canvas id="myCanvas-grandient" width="250" height="150" class="ca"></canvas>

<script type="text/javascript">

	var cvsg = document.getElementById("myCanvas-grandient");
	var ctxg = cvsg.getContext("2d");

	var grd = ctxg.createLinearGradient(0,0,0,130);
	//JavaScript语法context.createLinearGradient(x0,y0,x1,y1);
	//其中x0表示“渐变开始点的x坐标”；
	//y0表示“渐变开始点的 y 坐标”；
	//x1表示“渐变结束点的 x 坐标”；
	//y1表示“渐变结束点的 y 坐标”；
	//补充：当其他值为0，x1大于0时为从左向右渐变；
	//当其他值为0，y1大于0时为从上到下渐变；

	grd.addColorStop(0,"#008B8B");
	grd.addColorStop(0.2,"#458B74");
	grd.addColorStop(0.4,"#458B74");
	grd.addColorStop(0.6,"#00EE76");
	grd.addColorStop(0.8,"#FFD700");
	grd.addColorStop(1,"#CD9B1D");

	ctxg.fillStyle=grd;
	ctxg.fillRect(20,20,200,120);

</script>
</body>
</html>

 

 

 

【效果图】

 

 

【知识点】

 

createLinearGradient() 方法创建线性的渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

 

 

 

使用格式：addColorStop(0~1,color);

 

下面是放射性渐变简单实例

 

 

 

【源代码】

<!DOCTYPE html>
<html>
<head>
	<title>canvas</title>
	<meta charset="utf-8">
	<style type="text/css">
.ca{
	border:1px solid #008B8B;
}

	</style>
</head>
<body>
<canvas id="myCanvas-radial" width="250" height="150" class="ca"></canvas>

<script type="text/javascript">

	var cvsr = document.getElementById("myCanvas-radial");
	var ctxr = cvsr.getContext("2d");

	var grd = ctxr.createRadialGradient(75,50,5,90,60,100);
	//JavaScript语法context.createRadialGradient(x0,y0,r0,x1,y1,r1);
	//其中x0表示“渐变的开始圆的 x 坐标”；
	//y0表示“渐变的开始圆的 y 坐标”；
	//r0表示“开始圆的半径”；
	//x1表示“渐变的结束圆的 x 坐标”；
	//y1表示“渐变的结束圆的 y 坐标”；
	//r1表示“结束圆的半径”；
	
	grd.addColorStop(0,"#008B8B");
	grd.addColorStop(0.2,"#458B74");
	grd.addColorStop(0.4,"#458B74");
	grd.addColorStop(0.6,"#00EE76");
	grd.addColorStop(0.8,"#FFD700");
	grd.addColorStop(1,"#CD9B1D");

	ctxr.fillStyle=grd;
	ctxr.fillRect(20,20,200,120);

</script>
</body>
</html>

 

 

 

【效果图】

 

 

 

Canvas - 绘制图形简单实例

【源代码】

<!DOCTYPE html>
<html>
<head>
	<title>canvas</title>
	<meta charset="utf-8">
	<style type="text/css">
.ca{
	border:1px solid #008B8B;
}

	</style>
</head>
<body>
<canvas id="myCanvas-line" width="150" height="150" class="ca"></canvas>

<script type="text/javascript">

	var cvs = document.getElementById("myCanvas-line");
	var ctxl = cvs.getContext("2d");
	ctxl.moveTo(20,20);   //moveTo(x,y) 定义线条开始坐标;
	ctxl.lineTo(20,100);  //lineTo(x,y) 定义线条结束坐标;
	ctxl.lineTo(100,100);
	ctxl.lineTo(100,20);
	ctxl.lineTo(20,20);
	ctxl.stroke();  //使用 stroke() 方法来绘制线条:

</script>
</body>
</html>

 

 

 

【效果图】

 

 

如果你看懂了试着思考一下下面的图形怎么绘制吧~大胆尝试

 

 

 

 

Canvas - 图案

 

【源代码】

<!DOCTYPE html>
<html>
<head>
	<title>canvas</title>
	<meta charset="utf-8">
	<style type="text/css">
.ca{
	border:1px solid #008B8B;
}

	</style>
</head>
<body>
<canvas id="myCanvas-pattern" width="370" height="350" class="ca"></canvas>

<img src="../images/a1.jpg" id="lamp" width="50" height="50">

<script type="text/javascript">

	var cvsp = document.getElementById("myCanvas-pattern");
	var ctxp = cvsp.getContext("2d");

	var img = document.getElementById("lamp");

	//方法一开始：
	 var pat = ctxP.createPattern(img,"no-repeat");//可以设置图片重复方式
	ctxP.rect(0,0,150,100);
	ctxP.fillStyle=pat;
	ctxP.fill();
	//方法一结束；

	//如果方法一没有显示出效果，将方法一部分内容注释掉，尝试方法二：
	// img.onload = function(){
	// 	ctxp.drawImage(img,10,10);
	// }

</script>
</body>
</html>

 

 

 

【效果图】

 

Canvas - 文本

【源代码】

<!DOCTYPE html>
<html>
<head>
	<title>canvas</title>
	<meta charset="utf-8">
	<style type="text/css">
.ca{
	border:1px solid #008B8B;
}

	</style>
</head>
<body>
<canvas id="myCanvas-text" width="250" height="150" class="ca"></canvas>

<script type="text/javascript">

	var cvs = document.getElementById("myCanvas-text");
	var ctext = cvs.getContext("2d");

	ctext.font = "30px Arial";
	ctext.strokeText("我真帅!",20,100);
	//fillText定义实心的文本；
	//JavaScript语法：stroke(text,x,y)；
	//其中text为显示文本；x表示“文本的x坐标”；
	//y表示“文本的y坐标”；

</script>
</body>
</html>

 

【效果图】

 

 

 

 

Canvas - 渐变色文本

【源代码】

<!DOCTYPE html>
<html>
<head>
	<title>canvas</title>
	<meta charset="utf-8">
	<style type="text/css">
.ca{
	border:1px solid #008B8B;
}

	</style>
</head>
<body>
<canvas id="myCanvasText" width="260" height="150" class="ca"></canvas>

<script type="text/javascript">

	var cvsT = document.getElementById("myCanvasText");
	var ctxT = cvsT.getContext("2d");

	
	var grd = ctxT.createLinearGradient(0,0,cvsT.width,0);
	
	grd.addColorStop(0,"#cb1310");
	grd.addColorStop(0.2,"#cb3b10");
	grd.addColorStop(0.4,"#cb7b10");
	grd.addColorStop(0.6,"#cbaa10");
	grd.addColorStop(0.8,"#c7cb10");
	grd.addColorStop(1,"#72cb10");

    ctxT.font = "50px myFirstFont";
	ctxT.fillStyle=grd;
	ctxT.fillText("JavaScript",10,110);
	
</script>
</body>
</html>

【效果图】

更多内容详情请查看链接点击打开链接

 

 

 

 

 

识汝
关注
专栏目录
关于canvas的一些小案例
兜兜的博客
07-16 593
本篇内容主要为canvas的一些小案例制作及代码书写，案例包括：钟表的制作案例，跟随鼠标移动的彩带案例
HTML5标签--Canvas基础（1）：
qq_51874203的博客
06-14 1105
canvas
canvas-示例
08-29
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
【Web前端技术 02】深入探索HTML5：标签全解析与案例演示！
最新发布
Wc&Yd博客
07-19 988
🌟 深入探索HTML5：标签全解析与案例演示！本文带领大家全面了解HTML5的标签用法，从基础结构到新增语义化标签，通过丰富的实例演示，帮助读者掌握网页设计的核心技能。无论是初学者还是进阶者，都能在这篇文章中找到提升自己HTML5技能的宝贵信息。让我们一起构建更美好的网络世界！🚀🌐
canvas的简单实例集合
马优晨
11-02 4149
这里讲解一些canvas的实例demo，大家可以参考着看看，希望对你有一定的帮助。 这里的demo主要是：canvas 绘制路径 、绘制矩形、绘制文本 、绘制圆形和扇形 、 设置渐变色 、设置渐变色 、图像处理方法、动画HTML代码<canvas id="myCanvas" width="400" height="200"> 您的浏览器不支持canvas！ </canva
canvas基础讲解加示例
肥学的博客
06-19 759
之前其实有介绍过，只是没有给示例我们再来说说他。它内部封装的函数： 样例介绍1 样例2 样例3 点击直接资料领取 如果你在学习python或者Java哪怕是C遇到问题都可以来给我留言，因为在学习初期新手总会走很多弯路，这个时候如果没有有个人来帮一把的话很容易就放弃了。身边很多这样的例子许多人学着学着就转了专业换了方向，不仅是自身问题还是没有正确的学习。所以作为一个过来人我希望有问题给我留言，说不上是帮助就是顺手敲几行字的事情。这里有python，Java学习资料还有有有趣好玩的编程项目，更有难寻的各种
Canvas实例
banfu6521的博客
07-05 84
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #myCanvas{ ...
html5新增标签canvas画布基础详解及实操案例（上）
dayewandou的博客
10-08 2591
如果文章有不对之处，还请大神们多多指点     canvas也是html中的一个元素，可以给这个元素添加一些html属性，属性width默认为300px，heigth默认为150px；     canvas是h5中新增的众多元素中的一个，直译过来叫做画布，可以用来通过h5绘制一些图形效果；     刚开始的时候只是知道是用来做一些图形效果的，但是后来了解到canvas的强大     可以制
html事件改变矩形大小-HTML5绘制矩形实例教程docx文档下载
11-17
HTML5 Canvas是JavaScript的重要应用领域，通过结合HTML、CSS和JavaScript，开发者可以创建丰富的、交互式的网页图形应用。这个实例教程提供了一个实践HTML5 Canvas和JavaScript交互功能的起点，帮助读者更好地理解...
vue下canvas裁剪图片实例讲解
10-15
在Vue.js应用中，使用HTML5的Canvas元素裁剪图片是一项常见的需求，特别是在处理用户上传的照片或进行图像编辑时。本文将深入解析如何在Vue环境下实现这个功能。 首先，我们需要了解Canvas的基本用法。Canvas是一个...
HTML5 canvas绘制涂鸦画板.zip
05-23
这个实例展示了HTML5 canvas的强大功能，结合JavaScript，我们可以构建出许多富交互性和创新性的Web应用。无论是教育、娱乐还是专业用途，canvas都是一个不可忽视的工具。通过深入理解和实践，开发者可以创建出更多...
canvas绘图 制作的小案例
01-19
canvas绘图 制作的小案例 canvas绘图 制作的小案例 canvas绘图 制作的小案例 canvas绘图 制作的小案例
canvas小实例.rar
06-01
使用canvas绘制和裁切图片，使用filter这个CSS3属姓给图片加模糊效果
html5 画布例子
02-06
html5 canvas画布例子，一个连线的游戏
html5画布应用实例
09-25
html5 canvas应用实例 简单的示例页面 画点，画线，画圆，都有，可以看看
canvas案例
04-13
<canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。 在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。
jquery html5 canvas 图表插件获取表格数据值
11-06
本篇文章将详细讲解如何利用jQuery、HTML5的Canvas元素以及图表插件来获取表格数据并展示在Canvas图表上。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互。在本场景中，...
《HTML5开发精要与实例详解》配套源码
11-21
《HTML5开发精要与实例详解》这本书无疑是一本深入学习HTML5的优秀教程，通过配套的源码，我们可以更直观地理解并实践书中的理论知识。 首先，HTML5的新元素是其一大亮点。例如，`<header>`、`<footer>`、`<nav>`和...
canvas 案例——时钟
yemuxia_sinian的博客
08-01 842
首先先理解几个方法： 1、save()和restore()：这对法宝非常有用，两个配对使用，saved方法用于临时保存画布的坐标系统的状态；restore方法用来恢复save之后保存的状态。可以简单的理解为，save之后的一系列的操作，比如translate和rotate等，在restore后，都会被释放恢复到原来的坐标状态。 eg： ctx.strokeStyle = '...
HTML5移动开发Canvas教程：小熊顶蘑菇实例解析
"实例小熊顶蘑菇-HTML 5高级移动开发 Canvas画布PPT教程" 在HTML5中，Canvas是一个强大的绘图工具，允许开发者通过JavaScript在网页上动态绘制图形。这个教程以"小熊顶蘑菇"的实例，深入讲解了如何使用Canvas进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值