HTML5中的Canvas绘图操作（二）

最新推荐文章于 2024-10-18 12:00:49 发布
最新推荐文章于 2024-10-18 12:00:49 发布
阅读量921 收藏
点赞数
分类专栏： Android移动开发 HTML5/CSS/JavaScript

所有编程的绘图操作基本上都差不多，这里分段举例描述。


设置颜色：

<!DOCTYPE html>
<html>
	<head>
		<title>Drawing Lines</title>
		<style type="text/css">
			canvas {
				border: dotted 1px black;
			}
		</style>
		<script>
			window.onload = function() {
				var theCanvas = document.getElementById('Canvas1');
				if (theCanvas && theCanvas.getContext) {
					var ctx = theCanvas.getContext("2d");
					if (ctx) {
						ctx.fillStyle = "green";
						ctx.fillRect(20,20,100,100);
						
						ctx.lineWidth = 5;
						ctx.strokeStyle="rgba(0,0,255,1)";
						ctx.strokeRect(20,20,100,100);
					}
				}
			}
		</script>
	</head>
	<body>
		<h1>Drawing With Colors and Styles</h1>
		<p>This example shows how to set the drawing style</p>
		<canvas id="Canvas1" width="500" height="200">Your browser does not support canvas.</canvas>
	</body>
</html>

绘制直线： 

<!DOCTYPE html>
<html>
	<head>
		<title>Drawing Lines</title>
		<style type="text/css">
			canvas {
				border: dotted 1px black;
			}
		</style>
		<script>
			window.onload = function() {
				// draw lines of varying widths
				var theCanvas = document.getElementById('Canvas1');
				if (theCanvas && theCanvas.getContext) {
					var ctx = theCanvas.getContext("2d");
					if (ctx) {
						for (var i = 0; i < 10; i++){
							ctx.beginPath();
							ctx.lineWidth = i+1;
							ctx.moveTo(25, 25+i*15);
							ctx.lineTo(475, 25+i*15);
							ctx.stroke();
						}						
					}
				}
				
				// demonstrate the lineCap endings
				var theCanvas = document.getElementById('Canvas2');
				if (theCanvas && theCanvas.getContext) {
					var ctx = theCanvas.getContext("2d");
					if (ctx) {
						// draw the guidelines
						ctx.strokeStyle="cyan";
						ctx.lineWidth=1;
						ctx.beginPath();
						ctx.moveTo(50,25);
						ctx.lineTo(50,175);
						ctx.moveTo(450,25);
						ctx.lineTo(450,175);
						ctx.stroke();
						
						// draw lines using each lineCap;
						ctx.lineWidth = 25;
						ctx.strokeStyle="black";
						ctx.lineCap="butt";
						ctx.beginPath();
						ctx.moveTo(50,50);
						ctx.lineTo(450,50);
						ctx.stroke();						
						ctx.lineCap="round";
						ctx.beginPath();
						ctx.moveTo(50,100);
						ctx.lineTo(450,100);
						ctx.stroke();						
						ctx.lineCap="square";
						ctx.beginPath();
						ctx.moveTo(50,150);
						ctx.lineTo(450,150);
						ctx.stroke();						
					}
				}

				// Show the lineJoin variations
				var theCanvas = document.getElementById('Canvas3');
				if (theCanvas && theCanvas.getContext) {
					var ctx = theCanvas.getContext("2d");
					if (ctx) {
						ctx.lineWidth = 15;
						ctx.strokeStyle="black";
						ctx.lineJoin="round";
						ctx.beginPath();
						ctx.moveTo(25,150);
						ctx.lineTo(75,50);
						ctx.lineTo(125,150);
						ctx.stroke();						
						ctx.lineJoin="bevel";
						ctx.beginPath();
						ctx.moveTo(175,150);
						ctx.lineTo(225,50);
						ctx.lineTo(275,150);
						ctx.stroke();						
						ctx.lineJoin="miter";
						ctx.miterLim = 1;
						ctx.beginPath();
						ctx.moveTo(325,150);
						ctx.lineTo(375,50);
						ctx.lineTo(425,150);
						ctx.stroke();						
					}
				}
			}
		</script>
	</head>
	<body>
		<h1>Drawing Lines</h1>
		<p>This example will draw several styles of lines. First: basic line width</p>
		<canvas id="Canvas1" width="500" height="200">Your browser does not support canvas.</canvas>

		<p>Next: different settings for lineCap</p>
		<canvas id="Canvas2" width="500" height="200">Your browser does not support canvas.</canvas>

		<p>Next: different settings for lineJoin</p>
		<canvas id="Canvas3" width="500" height="200">Your browser does not support canvas.</canvas>
	</body>
</html>

绘制矩形： 

<!DOCTYPE html>
<html>
	<head>
		<title>Drawing Rectangles</title>
		<style type="text/css">
			#Canvas1 {
				border: dotted 1px black;
			}
		</style>
		<script>
			window.onload = function() {
				var theCanvas = document.getElementById('Canvas1');
				if (theCanvas && theCanvas.getContext) {
					var ctx = theCanvas.getContext("2d");
					if (ctx) {
						// draw just a stroked rectangle
						ctx.strokeStyle = "blue";
						ctx.lineWidth = 5;
						ctx.strokeRect(25,25,100,125);
						
						// draw just a filled rectangle
						ctx.fillStyle = "green";
						ctx.fillRect(175, 25, 100, 125);
						
						// draw a stroked and filled rectangle
						ctx.strokeStyle = "red";
						ctx.fillStyle = "yellow";
						ctx.lineWidth = 10;
						ctx.fillRect(325, 25, 100, 125);
						ctx.strokeRect(325,25,100,125);
						
						// clear a rectangle
						ctx.clearRect(15, 75, 450, 50);
					}
				}
			}
		</script>
	</head>
	<body>
		<h1>Drawing Rectangles</h1>
		<p>This example will draw several styles of rectangles</p>
		<canvas id="Canvas1" width="500" height="300">Your browser does not support canvas.</canvas>
	</body>
</html>

使用路径绘制折线： 

<!DOCTYPE html>
<html>
	<head>
		<title>Drawing Paths</title>
		<style type="text/css">
			#Canvas1 {
				border: dotted 1px black;
			}
		</style>
		<script>
			window.onload = function() {
				var theCanvas = document.getElementById('Canvas1');
				if (theCanvas && theCanvas.getContext) {
					var ctx = theCanvas.getContext("2d");
					if (ctx) {
						ctx.strokeStyle = "blue";
						ctx.fillStyle = "red";
						ctx.lineWidth = 5;
						
						// draw an open path (not closed)
						ctx.beginPath();
						ctx.moveTo(25,175);
						ctx.lineTo(50,25);
						ctx.lineTo(125,50);
						ctx.lineTo(175,175);
						ctx.stroke();
						
						// draw a closed path
						ctx.beginPath();
						ctx.moveTo(225,175);
						ctx.lineTo(250,25);
						ctx.lineTo(325,50);
						ctx.lineTo(375,175);
						ctx.closePath();
						ctx.stroke();

						// draw a closed path
						ctx.beginPath();
						ctx.moveTo(425,175);
						ctx.lineTo(450,25);
						ctx.lineTo(525,50);
						ctx.lineTo(575,175);
						ctx.fill();
						ctx.stroke();
					}
				}
			}
		</script>
	</head>
	<body>
		<h1>Drawing Paths</h1>
		<p>This example will draw paths, both open and closed</p>
		<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
	</body>
</html>



绘制弧线：

<!DOCTYPE html>
<html>
	<head>
		<title>Drawing Arcs</title>
		<style type="text/css">
			#Canvas1 {
				border: dotted 1px black;
			}
		</style>
		<script>
			window.onload = function() {
				var theCanvas = document.getElementById('Canvas1');
				if (theCanvas && theCanvas.getContext) {
					var ctx = theCanvas.getContext("2d");
					if (ctx) {
						ctx.strokeStyle = "blue";
						ctx.fillStyle = "red";
						ctx.lineWidth = 5;
						
						// stroke a quarter arc
						ctx.beginPath();
						ctx.arc(50,150,100,1.5*Math.PI,2*Math.PI);
						ctx.stroke(); 

						// stroke a three-quarter arc, going anti-clockwise
						ctx.beginPath();
						ctx.arc(300,150,100,0,1.5*Math.PI,false);
						ctx.stroke(); 

						// stroke and fill a circle
						var degrees = 173;
						var radians = (Math.PI /180) * degrees;
						ctx.beginPath();
						ctx.arc(550,150,100,0,radians);
						ctx.fill();
						ctx.stroke(); 
					}
				}
			}
		</script>
	</head>
	<body>
		<h1>Drawing Arcs</h1>
		<p>This example will draw arcs, both open and closed</p>
		<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
	</body>
</html>


绘制曲线，贝塞尔曲线和二次方程曲线：

<!DOCTYPE html>
<html>
	<head>
		<title>Drawing Bezier and Quadratic Curves</title>
		<style type="text/css">
			#Canvas1 {
				border: dotted 1px black;
			}
		</style>
		<script>
			window.onload = function() {
				var theCanvas = document.getElementById('Canvas1');
				if (theCanvas && theCanvas.getContext) {
					var ctx = theCanvas.getContext("2d");
					if (ctx) {
						ctx.strokeStyle = "blue";
						ctx.lineWidth = 5;
						
						// stroke a simple bezier curve
						ctx.beginPath();
						ctx.moveTo(50,200);
						ctx.bezierCurveTo(50,300,200,100,200,150);
						ctx.stroke();
						// now make the control points visible
						ctx.strokeStyle = "rgba(0,0,0,.25)";
						ctx.lineWidth = 1;
						ctx.beginPath();
						ctx.moveTo(50,200);
						ctx.lineTo(50,300);
						ctx.lineTo(200,100);
						ctx.lineTo(200,150);
						ctx.stroke();

						// stroke a quadratic curve
						ctx.strokeStyle = "green";
						ctx.lineWidth = 5;
						ctx.beginPath();
						ctx.moveTo(400,200);
						ctx.quadraticCurveTo(500,100,600,150);
						ctx.stroke();
						// now make the control points visible
						ctx.strokeStyle = "rgba(0,0,0,.25)";
						ctx.lineWidth = 1;
						ctx.beginPath();
						ctx.moveTo(400,200);
						ctx.lineTo(500,100);
						ctx.lineTo(600,150);
						ctx.stroke();
					}
				}
			}
		</script>
	</head>
	<body>
		<h1>Drawing Bezier and Quadratic Curves</h1>
		<p>This example will draw bezier and quadratic curves, along with their control points 
		so you can see how the curve is affected by the control point.</p>
		<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
	</body>
</html>

绘制文字： 

<!DOCTYPE html>
<html>
	<head>
		<title>Drawing Text</title>
		<style type="text/css">
			#Canvas1 {
				border: dotted 1px black;
			}
		</style>
		<script>
			window.onload = function() {
				var theCanvas = document.getElementById('Canvas1');
				if (theCanvas && theCanvas.getContext) {
					var ctx = theCanvas.getContext("2d");
					if (ctx) {
						var theString = "Drawing Text on a Canvas";
						
						// draw a simple text string using the default settings
						ctx.fillText(theString, 20,20);
						
						// draw the string with some font information
						ctx.font = "25pt Georgia"
						ctx.fillText(theString, 20,60);

						// draw the string with a fillStyle color
						ctx.fillStyle = "blue";
						ctx.fillText(theString, 20,100);
						
						// draw the string with both a stroke and a fill with some opacity setting
						ctx.font = "32pt Verdana"
						//ctx.textBaseline="middle";
						ctx.fillStyle = "yellow";
						ctx.strokeStyle = "rgba(0,255,0,0.8)";
						ctx.fillText(theString, 20,160);						
						ctx.strokeText(theString, 20,160);
						
						// use measureText to draw a line under the text
						var textW = ctx.measureText(theString);
						ctx.beginPath();
						ctx.strokeStyle="black";
						ctx.moveTo(20,170);
						ctx.lineTo(textW.width,170);
						ctx.stroke();						
					}
				}
			}
		</script>
	</head>
	<body>
		<h1>Drawing Text</h1>
		<p>This example will draw arcs, both open and closed</p>
		<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
	</body>
</html>

绘制状态： 

<!DOCTYPE html>
<html>
	<head>
		<title>Saving and Restoring Canvas State</title>
		<style type="text/css">
			#Canvas1 {
				border: dotted 1px black;
			}
		</style>
		<script>
			window.onload = function() {
				var theCanvas = document.getElementById('Canvas1');
				if (theCanvas && theCanvas.getContext) {
					var ctx = theCanvas.getContext("2d");
					if (ctx) {
						// set up some drawing information
						ctx.strokeStyle = "red";
						ctx.fillStyle = "yellow";
						ctx.lineWidth = 10;
						
						// draw the first Rectangle
						ctx.fillRect(25,25,100,125);
						ctx.strokeRect(25,25,100,125);

						// now, draw another rectangle with different settings
						ctx.save(); // this will save the current settings
						
						ctx.strokeStyle = "green";
						ctx.fillStyle = "blue";
						ctx.lineWidth = 5;
						ctx.fillRect(175, 25, 100, 125);
						ctx.strokeRect(175, 25, 100, 125);
						
						ctx.restore(); // now restore the original settings
						
						// draw a stroked and filled rectangle
						ctx.fillRect(325, 25, 100, 125);
						ctx.strokeRect(325,25,100,125);
					}
				}
			}
		</script>
	</head>
	<body>
		<h1>Saving and Restoring the Canvas State</h1>
		<p>This example shows how to manage the canvas state using save() and restore()</p>
		<canvas id="Canvas1" width="500" height="300">Your browser does not support canvas.</canvas>
	</body>
</html>




Soloman
关注
专栏目录
canvas 在其他画好的上面继续画_详解canvas绘制多张图的排列顺序问题
weixin_39708708的博客
12-20 1001
您好，请教您一个html5 canvas的问题： 我在canvas您好，请教一个html5 canvas的问题： 我在canvas中画了多个图形，有图像canvas可以实现 首先canvas要响应鼠标事件(onmousedown之类) 之后所有的图形必须要创建相应的对象，来记录他们所在的位置以及大小还有zOrder(层叠位置，在2个对象重叠的时候决定谁在上面)，相应的对象放到一个数组里并按zOrd...
HTML5 canvas基本绘图之绘制阴影效果
09-28
在实际的绘图操作中，我们需要获取`<canvas>`元素的`2D渲染上下文`（CanvasRenderingContext2D），这是通过调用`canvas`元素的`getContext('2d')`方法实现的。一旦获得这个对象，我们就可以利用它提供的各种方法来...
小程序canvas绘制图片并保存
Lval的博客
06-18 2243
准备画布 <canvas style="width: 300px; height: 369px;" canvas-id='myCanvas'></canvas> 建立canvas绘图的上下文对象 const ctx = wx.createCanvasContext('myCanvas') 绘制 先绘制一个和画布等同大小的白色矩形作为底图 ctx.setFillStyl...
微信小程序开发—(八)canvas绘制图形
oshan2012的博客
02-22 2561
一.小知识 (1).API接口 (2).context 对象的方法列表 二.步骤 wxml中： <canvas canvas-id="myCanvas" class="myCanvas" ></canvas> 在js文件onLoad: function() {}的方法中开始编写代码 1.创建一个 Canvas 绘图上下文 CanvasCon...
canvas基础学习（二）
aiyaya2016的博客
11-25 456
一、图像绘制 canvas绘制图像的方法是ctx.drawImage();该方法有三种使用方式 1、ctx.drawImage(img,x,y); img是指图像对象，x和y分别是这个图像左上角在canvas画布的坐标，而图像显示的大小为图像本身的像素值，超出canvas画布的部分不显示。 2、ctx.drawImage(img,x,y,w,h); 和上面的那个函数相比，可以控...
小程序API能力集成指南——画布API汇总（三）
IoT砖家
03-06 1294
关闭一个路径。会连接起点和终点。如果关闭路径后没有调用fill或者stroke并开启了新的路径，那之前的路径将不会被渲染。
HTML5_canvas_Web.rar_canvas_canvas html5_canvas 绘图_html5_html5 c
09-19
这个压缩包中的“使用 HTML5 canvas 进行 Web 绘图.mht”文件很可能是包含实例代码和详细讲解的教程，可以帮助开发者深入理解并掌握HTML5 Canvas的使用。通过学习和实践，开发者可以创建出丰富多样的Web图形应用，...
微信小程序之html5 canvas绘图并保存到系统相册
11-21
在微信小程序中，HTML5的Canvas API被广泛用于图形绘制和图像处理。在这个场景中，开发者需要实现一个功能，即用户可以通过Canvas绘制图形，并将结果保存到系统的相册。以下是一些关键知识点： 1. **Canvas绘图**：...
一波HTML5 Canvas基础绘图实例代码集合
09-28
此外，Canvas的绘图操作都是累积的，如果不希望新的绘制覆盖旧的图形，需要在每次绘制前调用`beginPath()`清空当前路径，或者使用`clearRect(x, y, width, height)`清除指定区域。在上述示例的最后，`clearRect()`...
HTML5 canvas基本绘图之填充样式实现
09-27
`<canvas>`标签在HTML5中被引入，用于在网页上创建一个可编程的画布。通过给`<canvas>`标签设置`id`、`class`、`style`等属性，我们可以像操作其他HTML元素一样操作它。另外，`<canvas>`标签的`width`和`height`属性...
Uniapp 小程序自定义组件 开发 Canvas 画布 生成图片 调用 ctx.draw 无反应 回调不执行 解决方法
奋斗在前端的实习生
01-06 1033
Uniapp 小程序自定义组件Canvas生成图片ctx.draw 无反应回调不执行解决方法
微信小程序canvas制作海报总结
wzp6010625的博客
07-12 751
一、由于海报中元素的宽高位置等是动态的，所以把这些值放在data中，并且为rpx单位 data: { // data中均为rpx值 wrap: { x: 0, y: 0, w: 600, h: 1000, src: '/images/img1.png' }, photo: { x: 200, y: 0, w: 200, h: 200, src: '/images/img2.png' }, finalPhoto: { x:
vue-drawing-canvas 技术文档
最新发布
gitblog_01279的博客
10-18 885
vue-drawing-canvas 技术文档 vue-drawing-canvas VueJS Component for drawing on canvas. 项目地址: https://gitcode.com/gh_mirr...
js学习之canvas的基础与应用(二)
domino~~的博客
08-18 301
js学习之canvas的基础与应用(二) 在上一部分介绍了一部分的canvas的基础，那么接下来就将剩余的一部分的canvas的内容。 1.阴影 ctx.shadowOffsetX 设置向x方向上的阴影 ctx.shadowOffsetY 设置向y方向上...
jQuery datatable踩坑之使用API报错XX.draw() is not a function
星海拾遗
07-24 1799
众所周之datatable的使用方法，这里不做赘述 js代码 that.table = $('#departmentListTable').dataTable(configData); html代码 <div> <table id="departmentListTable" border="0" cellpadding="0" cellspacing="0" class="kt-datatable ellipsis" width="100%"
Canvas的基本使用
wangwo1991的博客
09-09 3692
在自定义控件特别是自绘控件的时候，都会去重写onDraw方法，就会涉及到Paint和Canvas的使用，前面两篇播客说了下Paint的基本使用，这里说下Canvas的基本使用。Canvas：画布，通俗的说就是一个载体，比如在纸上写字，那么Canvas就类似于纸，Canvas可以绘制直线、点、几何图形、曲线、Bitmap、圆弧等等。Canvas绘制直线//startX X的起点 startY Y的起点
微信小程序CanvasContext.drawImage的用法
祗想安静地的博客
01-05 9826
最近做了一个生成海报的项目，有个需求需要画出图片。 我个人的想法是生成的图片像image的mode模式中的aspectFill显示的图片那样，“缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。” 也就是说保证图片的短边显示出来，超过的部分会被截取掉，图片不会变形 翻看了小程序文档的CanvasContext....
canvas使用drawImage()方法绘制img和video的区别
热门推荐
现在学习也不晚
08-29 1万+
drawImage()简介drawImage() 方法在画布上绘制图像、画布或视频。 drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。具体参数 参数 描述 img 规定要使用的图像、画布或视频。 sx 可选。开始剪切的 x 坐标位置。 sy 可选。开始剪切的 y 坐标位置。 swidth 可选。被剪切图像的宽度。 sh
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值