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>

【效果图】

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

 

 

 

 

 

识汝
关注
专栏目录
html事件改变矩形大小-HTML5绘制矩形实例教程docx文档下载
11-17
HTML5 Canvas是JavaScript的重要应用领域，通过结合HTML、CSS和JavaScript，开发者可以创建丰富的、交互式的网页图形应用。这个实例教程提供了一个实践HTML5 Canvas和JavaScript交互功能的起点，帮助读者更好地理解...
Html5中Canvas绘制、样式详解（不包含动画部分）
Army-海军的博客
06-24 1万+
canvas是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.不过，canvas 元素本身并没有绘制能力（它仅仅是图形的容器） - 必须使用脚本来完成实际的绘图任务
学习HTML5 Canvas这一篇文章就够了
热门推荐
完善飞跃
06-16 16万+
一、canvas简介&amp;amp;lt;canvas&amp;amp;gt; 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mo
【Web前端技术 02】深入探索HTML5：标签全解析与案例演示！
最新发布
Wc&Yd博客
07-19 1016
🌟 深入探索HTML5：标签全解析与案例演示！本文带领大家全面了解HTML5的标签用法，从基础结构到新增语义化标签，通过丰富的实例演示，帮助读者掌握网页设计的核心技能。无论是初学者还是进阶者，都能在这篇文章中找到提升自己HTML5技能的宝贵信息。让我们一起构建更美好的网络世界！🚀🌐
Canvas初级小案例
cloki的博客
11-30 1456
canvas 画直线 画虚线 画矩形 画坐标系 随机生成柱状图 画圆 小案例 —— 绘制五环 小案例 —— 画一个字母 “S” 小案例 —— 画八卦镇 小案例 —— 圆形进度条 小案例 —— 饼状图 小案例 —— 小球弹一弹 小案例 —— 小球弹一弹封装 画文字 画一个闹钟
29个非常实用的HTML 5实例、教程和技巧
kacoro的专栏
11-13 1069
由于Flash在Web和互联网应用程序中的应用越来越少，HTML5为Web设计师和开发者打开了新的大门。在这种情况下，每一个Web开发者的确有必要了解HTML 5的基本教程、技巧和术语。本文介绍了一份完整的列表——如果你是位Web开发者，绝对不想错过这30余个HTML5实例、教程和技巧。 AD： 【51CTO精选译文】对于想要着手新建Web项目的人来说
【html】融合canvas星星坠落页面
KatyLight的博客
06-02 253
梦幻星星动态。
HTML5 canvas绘制涂鸦画板.zip
05-23
这个实例展示了HTML5 canvas的强大功能，结合JavaScript，我们可以构建出许多富交互性和创新性的Web应用。无论是教育、娱乐还是专业用途，canvas都是一个不可忽视的工具。通过深入理解和实践，开发者可以创建出更多...
jquery html5 canvas 图表插件获取表格数据值
11-06
本篇文章将详细讲解如何利用jQuery、HTML5的Canvas元素以及图表插件来获取表格数据并展示在Canvas图表上。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互。在本场景中，...
vue下canvas裁剪图片实例讲解
10-15
在Vue.js应用中，使用HTML5的Canvas元素裁剪图片是一项常见的需求，特别是在处理用户上传的照片或进行图像编辑时。本文将深入解析如何在Vue环境下实现这个功能。 首先，我们需要了解Canvas的基本用法。Canvas是一个...
《HTML5开发精要与实例详解》配套源码
11-21
《HTML5开发精要与实例详解》这本书无疑是一本深入学习HTML5的优秀教程，通过配套的源码，我们可以更直观地理解并实践书中的理论知识。 首先，HTML5的新元素是其一大亮点。例如，`<header>`、`<footer>`、`<nav>`和...
超多经典canvas实例
08-11
超多经典canvas实例
Canvas的应用实例
SpringQi
02-09 1158
（一）实现水平滑动相册中间被选择的部分图片高亮显示效果 实现原理： 1.需要两组图片，一组为高亮显示图，一组为对应的暗色显示图 2.水平滑动这里使用了HorizontalScrollView 3.显示图片的控件为LinearLayout中动态添加ImageView 4.通过ImageView的setImageDrawable来给控件设置显示图片 5.这里主要使用了自定义Drawable类，并对图...
Canvas的基本介绍与使用，图解+案例带你快速上手Canvas
~~~
09-16 5573
Canvas的基本介绍与使用，图解+案例带你快速上手Canvas
Html5之canvas详解
一只努力搬砖的打工妹纸
07-15 2845
html中新增标签canvas的介绍
Html5 Canvas绘图实例
绳锯木断，水滴石穿，专心写文，无问西东！！！
09-14 3961
前些年的时候，突然对Canvas感兴趣，利用空闲时间做一些Canvas小例子进行练习，仅供学习分享使用。如有不足之处，还请指正。 什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建 Canvas 元素及JavaScript对象 向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度，如下所示： <can
HTML5中的canvas（画布）
zzh1251994430的博客
09-27 1448
HTML5中的canvas画布（） 1、关于canvas的简介 1.canvas是HTML5标签，表示画布，canvas只是作为图像绘制的容器，所有的绘制工作都在脚本JavaScript内部完成。 2.canvas的作用：①绘制基础图形；②绘制文字；③图形变形和图片合成；④处理图片和视频；⑤动画实现；⑥制作小游戏等等。 3.支持canvas的浏览器：Firefox, safari, chrome, opera, IE9等。 2、创建和获取 ① 查看当前浏览器是否支持canvas： 可以在canvas标签内书
canvas的简单实例集合
马优晨
11-02 4154
这里讲解一些canvas的实例demo，大家可以参考着看看，希望对你有一定的帮助。 这里的demo主要是：canvas 绘制路径 、绘制矩形、绘制文本 、绘制圆形和扇形 、 设置渐变色 、设置渐变色 、图像处理方法、动画HTML代码<canvas id="myCanvas" width="400" height="200"> 您的浏览器不支持canvas！ </canva
canvas绘画实例
幺妹儿儿的博客
03-17 514
（一）光束 效果如下： 完整代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas</title> <style type="text/css"> body { background-color: antiquewhite; } #canvas { background-c.
HTML5移动开发Canvas教程：小熊顶蘑菇实例解析
"实例小熊顶蘑菇-HTML 5高级移动开发 Canvas画布PPT教程" 在HTML5中，Canvas是一个强大的绘图工具，允许开发者通过JavaScript在网页上动态绘制图形。这个教程以"小熊顶蘑菇"的实例，深入讲解了如何使用Canvas进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值