HTML5利用Canvas绘制图形(绘制渐变、模式、变换)

最新推荐文章于 2021-06-20 12:35:27 发布
最新推荐文章于 2021-06-20 12:35:27 发布
阅读量3.2k 收藏 8
点赞数
分类专栏： HTML网页编程 Web前端技术 文章标签： 网页 html5 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuosixiaonengshou/article/details/72855693
版权

绘制渐变

渐变是一种很普遍的视觉形象，能带来视觉上的舒适感。在Canvas中，绘图API提供了两个原生的渐变方法，包括线性渐变和径向渐变。渐变，在颜色集上使用逐步抽样的算法，可以应用的描边样式和填充样式中。使用渐变需要三个步骤：首先是创建渐变对象；其次是设置渐变颜色和过渡方式；最后将渐变对象赋值给填充样式或描边样式。

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绘制渐变</title>
		<script type="text/javascript">
			function Draw(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				//创建渐变对象：线性渐变
				var grd=context.createLinearGradient(0,0,300,0);
				//设置渐变颜色及方式
				grd.addColorStop(0,"#f90");
				grd.addColorStop(1,"#0f0");
				//将填充样式设置为线性渐变对象
				context.fillStyle=grd;
				context.fillRect(0,0,300,80);
			}
			window.addEventListener("load",Draw,false);
			function Draw2(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				//创建渐变对象：径向渐变
				var grd=context.createLinearGradient(0,0,300,0);
				//设置渐变颜色及方式
				grd.addColorStop(0,"#0f0");
				grd.addColorStop(1,"#f90");
				//将填充样式设置为线性渐变对象
				context.fillStyle=grd;
				context.beginPath();
				context.arc(180,180,90,0,Math.PI*2,true);
				context.fill();
			}
			window.addEventListener("load",Draw2,false);
		</script>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas>
		<canvas id="canvas2" width="400" height="300">你的浏览器不支持canvas</canvas>
	</body>
</html>


效果 上(线性渐变)，下(径向渐变)


模式

    模式是一个抽象的概念，描述的是一种规律。在Canvas中，通常会为贴图图像创建一个模式，用于描边样式和填充样式，可以绘制出带图案的边框和背景图。

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模式</title>
		<script type="text/javascript">
			function Draw(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				var img=new Image();
				img.src="../img/5.jpg";
				img.οnlοad=function(){
					//创建一个贴图模式，循环平铺图像
					var ptrn=context.createPattern(img,'repeat'); 
					context.fillStyle=ptrn;
					context.fillRect(0,0,1000,2000);
				}
			}
			window.addEventListener("load",Draw,false);
		</script>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas>
	</body>
</html>

效果


变换

   在绘制图像的过程中，如果一种形状的图形要绘制多次，显然是增加了复杂性。Canvas绘图API提供了多种变换方法，为实现复杂的绘图操作提供了便捷的方法。常见的变换方法包括平移、缩放、旋转和变形。

1. 移动变换

    将整个坐标系统设置一定的偏移数量，绘制出来的图像也会跟着偏移。(默认以左上角(0,0)作为原点)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绘制渐变</title>
		<script type="text/javascript">
			function Draw(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				//设置移动偏移量
				context.translate(200,120);
				
				//绘制一个圆形脸谱
				ArcFace(context);
			}
			function ArcFace(context){
				//绘制一个圆形边框
				context.beginPath();
				context.arc(0,0,90,0,Math.PI*2,true);
				context.lineWidth=5;
				context.strokeStyle="#f90";
				context.stroke();
				//绘制一个脸谱
				context.beginPath();
				context.moveTo(-30,-30);
				context.lineTo(-30,-20);
				context.moveTo(30,-30);
				context.lineTo(30,-20);
				context.moveTo(-20,30);
				context.bezierCurveTo(-20,44,20,30,30,20);
				context.strokeStyle="#000";
				context.lineWidth=10;
				context.lineCap="round";
				context.stroke();
			}
			window.addEventListener("load",Draw,false);
		</script>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas>
	</body>
</html>

效果  


2.缩放变换

   缩放变换是将整个坐标系统设置一对缩放因子，绘制出来的图像会相应的缩放。

代码实现

function Draw(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				//设置移动偏移量
				context.translate(200,120);
				
				//缩放图像，在水平方向和垂直方向设置不同的缩放因子
				context.scale(0.6,0.4)
				
				//绘制一个圆形脸谱
				ArcFace(context);
			}

效果


3.旋转变换

  是将整个坐标系统设置一个选装的角度，绘制出来的图像会相应的旋转。

function Draw(){
				var canvas=document.getElementById("canvas");
				var context=canvas.getContext("2d");
				
				//设置移动偏移量
				context.translate(200,120);
				
				//旋转图像，顺时针旋转30度
				context.rotate(Math.PI/6);
				//缩放图像，在水平方向和垂直方向设置不同的缩放因子
				context.scale(0.6,0.4)
				
				//绘制一个圆形脸谱
				ArcFace(context);
			}

效果


D灿
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手把手教你实现一个流动的渐变色边框
Flutter 跨平台技术研究
07-28 846
手把手教你自定义绘制渐变色边框，并通过动画实现流动的效果，绘图加动画组合能够实现很多既有创意又有取的效果！
Grapher Automation 学习及绘制彩色渐变平面剖面图原理
haodawei123的博客
10-12 420
Application Object Application 对象是Grapher Automation的顶级对象，包括其他对象。 The Application object represents the Grapher program. It is a single instance of Grapher and it is the root of all objects in Grapher...
html5 canvas绘制几何图形动画特效
11-08
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效
Html利用Canvas绘制图形
07-16
利用Canvas绘制图形，包括圆形，矩形，心形，大熊头形，鱼形，大熊形，苹果形，猫咪头形，六边形，五角星，太阳花，狐狸头形，侧边长条形，鸡蛋形，钻石形等15种图案的绘制。具体可参考个人相关博客
html5 canvas涂鸦画板绘制图形效果
09-08
html5 canvas涂鸦画板绘制图形效果
HTML5 canvas自由绘制图形工具特效代码
03-20
HTML5 canvas自由绘制图形工具，可拖拽的自由绘图画板。
html5canvas绘制渐变图形,HTML5 Canvas渐变图形绘制[线性、径向]
weixin_42452301的博客
06-04 224
让大家久等了，我们的渐变课程终于上演了，谢谢关注。依照惯例，如果您学习过之前的，你会觉得很亲切的，因为在html5里他们的名称是一样的。我们一起来看代码注释讲解线性渐变语法createLinearGradient(xStart,yStart,xEnd,yEnd);渐变起点横坐标：xStart，纵坐标：yStart；渐变终点横坐标：xEnd，纵坐标：yEnd；来给渐变加入至少2个的Stop点吧add...
HTML5Canvas绘制渐变图
TXW6666的博客
09-26 721
什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 canvas 元素. 注意: Internet Explorer 8 及更早 IE 版本的浏览器不支持 canvas元素 创建一个画布（Canvas） 一个画布在网页
【绘制】HTML5 Canvas 中渐变色和图案（图文、示例）
苏一恒
08-26 1498
我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。 教程介绍、教程目录等能在README里查阅。 传送门：https://github.com/827652549/CanvasStudy 目录 渐变色 线性渐变 用法 代码示例 效果演示 放射渐变 线性渐变和放射渐变的演示链接 图案 说明 ...
canvas画矩形（包括渐变）
08-12
NULL 博文链接：https://canlynet.iteye.com/blog/2269879
JavaScript+html5 canvas绘制渐变区域完整实例
10-22
主要介绍了JavaScript+html5 canvas绘制渐变区域的方法,结合完整实例形式分析了canvas颜色调用与图形绘制的相关技巧,需要的朋友可以参考下
canvas绘制折线、使用线性渐变、径向渐变和lineJoin，lineCap属性
ayhg1的博客
06-20 609
想了解更全面的canvas API可以点击右侧: canvas简介及常用API canvas绘制折线 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { background-color: #99CCFF; } #canvas {
使用Canvas 实现一款图表插件(附带源码)
qq_34998786的博客
12-30 611
一、Canvas 介绍❝Canvas 是一个画布容器，通过 JavaScript 来绘制 2D 图形（3D 也可以，使用 three.js）。Canvas 是逐像素进行渲染的，在 Can...
HTML5_canvas_线性渐变
aof26372的博客
11-21 117
canvas 线性渐变 var linearG = pen.createLinearGradient(startX, startY, endX, endY); 两点的连线，决定了渐变的方向，和区间 var pen = myCanvas.getContext("2d"); // 1. 创建线性渐变 var linearG = pen.createLinearGradien...
HTML5中canvas线性渐变的用法
sxj的专栏
11-20 847
function draw2D(){ var canvas=document.getElementById("canvas-fram"); if(canvas==undefined){ return ; } canvas.width=1000; //设置画布的宽
html5线性渐变方向,使用canvas来完成线性渐变和径向渐变的功能的方法示例
weixin_42356340的博客
06-08 454
fillStyle的第二种使用情况就是渐变色的填充。渐变色就分为线性渐变色和径向渐变色。线性渐变:大致分为两步 这里又会使用到canvas的两个新的函数。第一步 : 使用一个新的函数createLinearGradient( xstart，ystart,xend,yend );var linearGrad = context.createLinearGradient(xstart,ystart,x...
html5_canvas上的线性渐变
wutrg1502的博客
06-25 612
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript"&gt; function draw(){ var ctx=docum
canvas绘制图形
最新发布
10-16
Canvas 是 HTML5 中新增的一个标签，它可以用来绘制图形、动画等。通过 JavaScript 脚本，我们可以在 Canvas 上绘制各种形状、图像和文本。 下面是一个简单的例子，展示如何在 Canvas 上绘制一个矩形： ```html <canvas id="myCanvas" width="200" height="100"></canvas> ``` ```javascript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 200, 100); ``` 这段代码会在一个宽度为 200，高度为 100 的 Canvas 上绘制一个红色的矩形。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值