HTML5中的Canvas绘图操作（二）

最新推荐文章于 2024-04-16 21:05:32 发布
最新推荐文章于 2024-04-16 21:05:32 发布
阅读量884 收藏
点赞数
分类专栏： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas 在其他画好的上面继续画_详解canvas绘制多张图的排列顺序问题
weixin_39708708的博客
12-20 977
您好，请教您一个html5 canvas的问题： 我在canvas您好，请教一个html5 canvas的问题： 我在canvas中画了多个图形，有图像canvas可以实现 首先canvas要响应鼠标事件(onmousedown之类) 之后所有的图形必须要创建相应的对象，来记录他们所在的位置以及大小还有zOrder(层叠位置，在2个对象重叠的时候决定谁在上面)，相应的对象放到一个数组里并按zOrd...
HTML5 canvas基本绘图之绘制阴影效果
09-28
在实际的绘图操作中，我们需要获取`<canvas>`元素的`2D渲染上下文`（CanvasRenderingContext2D），这是通过调用`canvas`元素的`getContext('2d')`方法实现的。一旦获得这个对象，我们就可以利用它提供的各种方法来...
小程序ctx.draw()安卓上不执行，点击无反应，微信开发者工具和苹果上可以
weixin_59803648的博客
09-24 1271
小程序ctx.draw()安卓上不执行，点击无反应，微信开发者工具和苹果上可以
小程序绘制之CanvasContext
软考鸭
08-19 6097
一、全局 1、draw CanvasContext.draw(boolean reserve, function callback) reserve:本次绘制是否接着上一次绘制。即 reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制；若 reserve 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认 false。 绘制完成后执行的回调函数 示例： const ctx = wx.createCanvasC
微信小程序开发—(八)canvas绘制图形
oshan2012的博客
02-22 2523
一.小知识 (1).API接口 (2).context 对象的方法列表 二.步骤 wxml中： <canvas canvas-id="myCanvas" class="myCanvas" ></canvas> 在js文件onLoad: function() {}的方法中开始编写代码 1.创建一个 Canvas 绘图上下文 CanvasCon...
canvas基础学习（二）
aiyaya2016的博客
11-25 437
一、图像绘制 canvas绘制图像的方法是ctx.drawImage();该方法有三种使用方式 1、ctx.drawImage(img,x,y); img是指图像对象，x和y分别是这个图像左上角在canvas画布的坐标，而图像显示的大小为图像本身的像素值，超出canvas画布的部分不显示。 2、ctx.drawImage(img,x,y,w,h); 和上面的那个函数相比，可以控...
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`属性...
小程序API能力集成指南——画布API汇总（三）
IoT砖家
03-06 1219
关闭一个路径。会连接起点和终点。如果关闭路径后没有调用fill或者stroke并开启了新的路径，那之前的路径将不会被渲染。
小程序 canvas注意事项（3）draw
旸君颜的博客
09-20 4327
如果在画图完成后，有对应操作时，必须在draw的callback后执行，比如图片预览、改变画布大小等 ctx.draw(false, function() { console.log('后续操作'); })
Uniapp 小程序自定义组件 开发 Canvas 画布 生成图片 调用 ctx.draw 无反应 回调不执行 解决方法
奋斗在前端的实习生
01-06 972
Uniapp 小程序自定义组件Canvas生成图片ctx.draw 无反应回调不执行解决方法
微信小程序canvas制作海报总结
wzp6010625的博客
07-12 725
一、由于海报中元素的宽高位置等是动态的，所以把这些值放在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:
JavaScript实现网页截屏方法总结
前端开发博客
11-02 2935
>关注『前端开发博客』公众号，回复 加群 最近研究了下如何利用JavaScript实现网页截屏，包括在浏览器运行的JS，以及在后台运行的nodeJs的方法。主要看了以下几个： 1. PhantomJS 2. Puppeteer(chrome headless) 3. SlimerJS 4. dom-to-image 5. html2canvas 测试的网页使用了WebGL技术，所以下面的总结会和WebGL相关。 名词定义 ---- ##### headless browser 无...
前端性能监控（面试常见）
最新发布
qq_16546829的博客
04-16 1242
对于自定义加载逻辑（如使用加载库或组件），如果它们提供了加载完成的回调函数或状态指示器，可以直接使用这些接口来判断渲染完成。
Canvas知识点之三
ZLJ925的博客
09-06 474
1.ctx.drawImage的三种方式，要在img.onload ＝ function(){}中使用。 <canvas id="cvs" width="500" height="500"></canvas> <img src="./imgs/example.jpg"> <script> var cvs = document.getElementById('cvs')
Canvas
Jarry的博客
02-18 571
Canvas的使用以及高级部分 Canvas：画布、画板。 一、Canvas基本的使用 绘制直线、点、几何图形、曲线、Bitmap、圆弧等等 Path路径来绘制线条1.Region区域Canvas画布的正确的理解： 1）当canvas执行drawXXX的时候就会新建一个新的画布图层 canvas.drawRect(r, paint); 2）虽然后面新建了
HTML5 Canvas 2D绘图指南
文档详细介绍了Canvas2D API规范，包括各种绘图方法、属性和概念，如状态管理、转换、合成、颜色与风格、线条、阴影、形状、路径、文字、图像处理以及像素级操作等。 HTML5 Canvas 是一个强大的绘图工具，允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值