1. Canvas绘制基础图形

最新推荐文章于 2024-08-18 15:04:16 发布
最新推荐文章于 2024-08-18 15:04:16 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_40697723/article/details/83684373
版权

Canvas是在web画面中绘制位图的技术。

步骤：

1.取得Canvas对象。（相当于画布）

2.从Canvas对象中获取绘图用的上下文。（相当于绘画用的笔）

3.使用上下文中的方法和属性进行绘图。

1.简单例子：

	<style type="text/css">
		canvas {
			width: 300px;
			height: 300px;
		}
	</style>
</head>
<body>
	<canvas id="cas"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById("cas");
		//2d指绘制的是二维图形，3d指绘制三维图形
		var ctx = canvas.getContext("2d");

		ctx.fillStyle = "rgb(255, 0, 0)";    //设置填充颜色
		ctx.fillRect(50, 50, 200, 200);      //绘制矩形
	</script>
</body>

效果图：

属性知识：

 

1.颜色的指定方法通常有三种：

		ctx.fillStyle = "#ff0000";
		ctx.fillStyle = "rgb(255,0,0)";
		ctx.fillStyle = "rgba(255,0,0,0.5)";

2.坐标的指定方法：

以左上角为原点，向右和向下为正方向，单位是像素。

3.路径:所谓路径就是通常所说的“一笔绘图”的形式，在canvas中，通过多次重复路径绘制更复杂的图形。

（1）.下面是绘制简单三角形的步骤：

  1. 取得Canvas绘图的上下文；
  2. 调用beginPath()方法宣布路径绘制的开始；
  3. 使用moveTo(), lineTo()方法依次指定坐标和绘制直线；
  4. 调用closePath()方法结束路径；
  5. 调用fill()方法进行图形绘制。
	<style type="text/css">
		canvas {
			width: 300px;
			height: 300px;
		}
	</style>
</head>
<body>
	<canvas id="cas"></canvas>
	<script type="text/javascript">
		//取得canvas对象和绘图用的上下文
		var canvas = document.getElementById("cas");
		var ctx = canvas.getContext("2d");

		//路径绘制的开始
		ctx.beginPath();

		//路径的绘制
		ctx.moveTo(0,0);
		ctx.lineTo(0,290);
		ctx.lineTo(290,290);

		//路径绘制结束
		ctx.closePath();

		//进行绘图处理
		ctx.fillStyle = "rgb(200,0,0)";
		ctx.fill();
	</script>

效果：

 

（2）.进行路径绘制的各种办法：

表1 控制路径时使用的方法
方法功能
beginPath()重置路径的开始
closePath()关闭到现在为止的路径
moveTo(x, y)指定绘图开始时的基点(x, y)
lineTo(x, y)绘制从前一次绘图位置到(x, y)的直线

 

 

 

 

 

 

 

表2 绘制路径时使用的方法
方法功能
stroke()绘制路径
fill()填充路径

 

 

 

 

 

表3 指定绘图样式时使用的属性
属性功能
fillStyle指定填充时使用的颜色和样式
strokeStyle指定路径的线颜色和样式
lineWidth制定路径线的粗细

 

 

 

 

 

 

下面是一个点击绘制三角形的程序：

	<style type="text/css">
		canvas {
			width: 300px;
			height: 300px;
		}
	</style>
</head>
<body>
	<canvas id="cas"></canvas>
	<script type="text/javascript">
		//取得canvas对象和绘图用的上下文
		var canvas = document.getElementById("cas");
		var ctx = canvas.getContext("2d");

		//设置canvas的onmouse事件
		canvas.onmousedown = function(event){

			//取得触摸处的坐标,event就是事件，包括了这个事件的所有参数和信息
			var x = event.x;
			var y = event.y;
			var r = Math.random()*10 + 5;
			//路径指定
			ctx.beginPath();
			ctx.moveTo(x, y);
			ctx.lineTo(x, y+r);
			ctx.lineTo(x+r, y+r);
			ctx.lineTo(x, y);

			//绘图
			ctx.strokeStyle = "red";
			ctx.stroke();	

		};
	</script>

效果：

 

4.绘制方法介绍：

 

  1. arc()方法：可以绘制圆和圆弧。

注意：Math.PI()表示π，弧度 = 角度*π/180

语法：context.arc(x,y,半径，开始弧度，结束弧度，是否逆时针旋转);

  • 绘制圆弧

 

	<canvas id="cas" width="300" height="300"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById("cas");
		var ctx = canvas.getContext("2d");

		var startAngle = 0;
		var endAngle = 1.2*Math.PI;

		ctx.beginPath();
		ctx.arc(150, 75, 50, startAngle, endAngle, true);
		ctx.strokeStyle = "#f00";
		ctx.stroke();
	</script>

注意：开始总把圆画成椭圆，后来查过以后发现最好把canvas宽高设置在行内，而且别写单位。

效果：

 

  • 绘制圆
	<canvas id="cas" width="300" height="300"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById("cas");
		var ctx = canvas.getContext("2d");

		ctx.beginPath();
		ctx.arc(100,100,50,0,2*Math.PI);
		ctx.fillStyle = "yellow";
		ctx.fill();
	</script>

效果图：

 

    2.arcTo()方法：此方法是创建介于两个切线之间的弧/曲线。

语法：context.arcTo(x1,y1,x2,y2,半径);

	<style type="text/css">
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="cas" width="300" height="300"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById("cas");
		var ctx = canvas.getContext("2d");

		//绘制路径
		ctx.beginPath();    
		//开始点
		ctx.moveTo(20,20);    
		//第一条线
		ctx.lineTo(200,20);    
		//创建弧
		ctx.arcTo(250,20,250,70,50);    
		//第二条线
		ctx.lineTo(250,280);

		ctx.strokeStyle = "green";
		ctx.lineWidth = 3;
		ctx.stroke();
	</script>

效果图：

 

     3.quadraticCurveTo()和bezierCurveTo()方法

涉及到贝塞尔曲线，使用时查文档：

 

       4.rect()方法：用于绘制矩形。

语法：context.rect(x,y,宽度，高度)

	<style type="text/css">
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="cas" width="300" height="300"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById("cas");
		var ctx = canvas.getContext("2d");

		ctx.rect(20,20,200,200);
		ctx.fillStyle = "green";
		ctx.strokeStyle = "red";
		ctx.lineWidth = 4;

		ctx.fill();
		ctx.stroke();
	</script>

效果：

 

canvas还提供三种特定的巨型绘制方法：

特定矩形绘制方法
方法功能说明
context.strokeRect(x,y,w,h)绘制矩形的轮廓
context.fillRect(x,y,w,h)填充矩形
context.clearRect(x,y,w,h)清空矩形
	<canvas id="cas" width="300" height="300"></canvas>
	<script type="text/javascript">
		var canvas = document.getElementById("cas");
		var ctx = canvas.getContext("2d");
		//注意：颜色放在绘制的前面，否则是黑色的
		//用红色绘制矩形轮廓
		ctx.strokeStyle = "red";
		ctx.lineWidth = 4;
		ctx.strokeRect(20,20,200,200);
		

		//用绿色来填充矩形
		ctx.fillStyle = "green";
		ctx.fillRect(20,20,200,200);
		
		//中间挖空一个矩形
		ctx.clearRect(50,50,100,50);
		
		ctx.stroke();
		ctx.fill();
	</script>

 

效果图：

 

 

HTML5利用Canvas绘制图形(Canvas基本知识、绘制矩形、使用路径和图形组合)
~~~~~~~~~~~~
05-23 2690
绘制图形有很多方法，可以借助Flash实现，也可以使用SVG和VML来绘图。本次将要学习一种新的灰土方法——使用Canvas元素，它是基于HTML5原生的绘图功能。使用Canvas元素，可以绘制图形，也可以实现动画。它方便了使用JavaScript脚本的前端开发人员，寥寥数行代码，就可以在Canvas元素中实现各种图像及动画。 Canvas基本知识 构建Canvas元素 非常简单 你的浏览
canvas基本绘图
Cg_Companion_Xi的博客
12-19 703
canvas 绘图 元素是HTML5中的绘图元素，通过定义一个画布区域，然后使用javascript动态地在这个区域里面绘制图形，对于2D和3D图形都可以绘制,。HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。 用canvas 绘制图形时经过以下几个步骤： 1.获取canvas对象. 2.使用ca...
HTML5之Canvas绘图——使用Canvas绘制图形的基本教程
weixin_33827731的博客
11-26 319
HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。 好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。 1、使用Canvas绘制直线：   &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; ...
Canvas[详解] —— 一篇教你学会Canvas和如何快速绘制图形
Lan_0316的博客
04-20 8982
Canvas是HTML5中的一个标签，用于在网页上动态生成图像和图形。
canvas 绘图的步骤
xiongzhengxiang的专栏
06-15 855
1 得到canvas的dom节点 var demo=document.getElementById('cs'); 2 得到canvas 节点对应的2d绘图环境 var context=demo.getContext('2d'); 3 可以开始绘图了...    绘制线的函数              画一条线，可以简单的用           context.moveTo(100
vue+canvas绘制图形
01-09
首先，我们来看"vue+canvas绘制图形"这个主题。Vue组件是Vue.js的核心特性之一，它允许我们将UI拆分成独立、可复用的部分。在这个项目中，我们可以创建一个名为`Canvas.vue`的Vue组件，专门负责处理Canvas元素。在`...
Canvas扩展：利用Fabric绘制图形
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-18 1021
Fabric.js 是一个灵活、高效的 JavaScript 库，它为开发者提供了丰富的图形绘制和编辑功能。该库建立在原生 Canvas API 之上，通过封装抽象出更易于使用的图形对象和操作接口，使得开发者可以轻松地创建复杂的图形应用。Fabric.js 允许开发者定义自定义图形类型，以便满足特定的需求。// 定义自定义图形类},});},i++) {});// 创建自定义图形], {});// 添加自定义图形到画布。
html5 canvas绘制几何图形动画特效
11-08
以下是对HTML5 Canvas绘制几何图形动画特效的详细讲解。 1. **Canvas API基础** HTML5 Canvas是一个基于矢量图形的画布，通过JavaScript进行编程操作。它提供了`<canvas>`标签，该标签在页面上创建一个矩形区域，...
SVG和Canvas绘图：使用Canvas绘制基本图形.docx
最新发布
08-28
SVG和Canvas绘图：使用Canvas绘制基本图形.docx
html5 canvas绘制七巧板图形代码
11-06
总结来说，HTML5 Canvas绘制七巧板图形涉及到HTML和JavaScript的基本语法，Canvas API的使用，以及一些基本的几何和数学知识。通过这样的项目，你可以深入理解Canvas绘图原理，同时锻炼到编程逻辑和问题解决能力。
Canvas绘图教程及简单实践
feiyu_may的博客
09-04 9800
一、前言     最近想尝试用代码画图，最开始考虑的是用css，用css画图的本质就是不断地拼接div，熟悉一些基本的css属性根据需求去设置，有一定的耐心就可以实现。网上有很多优秀的例子，如下面教程中的哆啦A梦。    https://blog.csdn.net/qq_29326717/article/details/73690980     但是觉得这样的方式并不灵活，在查阅资料的过程中深入了...
canvas入门系列(三)：使用canvas绘制图形
人生代码 ---- 公众号
05-04 931
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
【canvas绘制图形】
a_shun66的博客
02-08 1023
canvas绘制图形一、绘制圆形二、绘制三角形三、 绘制矩形 一、绘制圆形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init
HTML5 canvas 绘图步骤
weixin_30481087的博客
11-23 168
1.先把canvas选出来，不选出来你往哪儿画！ var oCan= document.getElementById('xxx'); 2.声明基于 canvas 的context对象，没他你怎么调用方法画？！ var cxt=oCan.getContext('2d');//还不支持3d呢 3.然后就用context对象的XXXStyle方法呗，你画画的时候不得选什么色儿的笔呀！(...
canvas 图形的基本绘制
weixin_42254598的博客
11-27 686
canvas 图形的基本绘制
canvas标签笔记和绘制基本图形
weixin_45757134的博客
11-17 373
canvas是html5新增的标签。此标签只是图形容器，必须通过通过JavaScript脚本来进行操作绘制。拥有很强大的绘图功能，canvas标签的起始坐标点是在左上方，默认情况下，<canvas>没有边框和内容。 一：基础部分 1.首先先创建一个canvas标签 <canvas id="myCanvas">您的浏览器不支持canvas标签，请更换或升级浏览器</canvas> 因为canvas标签是HTML5新增的标签，低级浏览器存在不支持的情况，建议在标签里面加入
Canvas 用法一：绘制图形
PANJU的博客
07-13 977
一、Canvas 简介Canvas 翻译过来为画布意思。这好比我们在学画画时，首先要有一块画板，然后使用各种彩色笔在画板上绘制各种各样的图形，最终会呈现给我们一幅优美的画。在这里，Canvas 就相当于画板，我们可以使用画笔在 Canvas 绘制各种各样的图形，最终画出我们想要的图形。Canvas 是 Android 2D 绘制图形的继承，提供丰富的 API 接口，功能非常强大。根据官方文档的介绍，
canvas绘制图形入门
weixin_44336702的博客
12-30 290
canvas绘制topo图欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使...
Canvas绘图——基本用法
前端萌新一枚
09-12 373
Canvas绘图——基本用法 一 、相关补充 HTML5添加的&amp;amp;amp;amp;lt;canvas&amp;amp;amp;amp;gt; 元素负责在页面中设定一个区域，然后可以通过JavaScript动态地在这个区域中绘制图形 &amp;amp;amp;amp;lt;canvas&amp;amp;amp;amp;gt; 最早由苹果公司推出的，当时主要用在其Dashboard微件中。很快，HTML5加入了这个元素，主要浏览器也迅
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值