HTML5canvas绘图

最新推荐文章于 2024-09-05 10:44:18 发布
最新推荐文章于 2024-09-05 10:44:18 发布
阅读量738 收藏
点赞数
分类专栏： HTML5 JS 文章标签： html5 绘图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq604598861/article/details/51974683
版权
JS 同时被 2 个专栏收录
7 篇文章 0 订阅
订阅专栏
HTML5
4 篇文章 0 订阅
订阅专栏

canvas绘图是位图，矢量图是SVG

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			text-align:center;
		}
		canvas{
			background-color:#efefef;
		}
	</style>
</head>
<body>
	<!--必须设置宽高属性-->
	<canvas id="c6" height="500" width="500">您的浏览器不支持</canvas>
	<canvas id="c1" height="500" width="500">您的浏览器不支持</canvas>
	<canvas id="c2" height="500" width="500">您的浏览器不支持</canvas>
	<canvas id="c3" height="500" width="500">您的浏览器不支持</canvas>
	<canvas id="c4" height="500" width="500">您的浏览器不支持</canvas>
	<canvas id="c5" height="500" width="500">您的浏览器不支持</canvas>
	<canvas id="c7" height="500" width="500">您的浏览器不支持</canvas>
	<canvas id="c8" height="500" width="500">您的浏览器不支持</canvas>
	<script type="text/javascript">

		/**
		鼠标事件
		offsetX 和offsetY相对于源事件
		clientX 和clientY相对于浏览器
		screenX 和screenY相对于显示器

		绘图的方法和函数
		fillStyle   : "#fff";				//填充颜色
		font        : "10px SimHei"			//字体
		globalAlpha : 1                     //全局透明度
		imageSmoothingEnabled: true 		//启用图片平滑
		lineCap     : "butt" 				//线条头部
		lineJoin    : "miter"				//线条连接处
		lineWidth   : 1 					//线条宽度
		shadowBlur  : 0 					//阴影半径
		shadowColor: "rgba(0, 0, 0, 0)"		//阴影颜色
		shadowOffsetX : 0 					//阴影X轴偏移量
		shadowOffsetY : 0 					//阴影Y轴偏移量
		strokeStyle   : "#000000" 			//轮廓/描边样式
		textAlign     : "start"				//文本对齐方式
		textBaseline  : "alphabetic"		//文本基线
		
		arc() 								//拱形
		arcTo()								//拱形到
		beginPath()							//开始一条路径
		bezierCurveTo()						//绘制贝塞尔曲线
		clearRect()							//清除矩形范围
		clip()								//裁切
		closePath()							//闭合路径
		createLinearGradient()				//创建线性渐变色
		createRadialGradient()				//创建径向渐变色
		drawImage()							//绘制图像
		ellipse()							//绘制椭圆
		fill()								//填充路径
		fillRect()							//填充矩形
		fillText()							//填充文本
		lineTo()							//到指定点绘制一条直线
		measureText()						//测量文本的宽度
		moveTo()							//移动到指定点
		rect()								//绘制矩形路径
		resetTransform()					//重置变形
		restore()							//恢复
		rotate()							//旋转
		save()								//保存
		scale()								//缩放
		stroke()							//勾勒轮廓/描边
		strokeRect()						//描边矩形区域
		strokeText()						//对文本进行文本
		transform()							//变形
		translate()							//平移

		**/

		/*****绘制矩形*****/
		var ctx6 = c6.getContext("2d");		//绘制画布上的画笔	一般用2d
		ctx6.strokeRect(0,0,100,100);		//绘制矩形描边	x轴位置 y轴位置 矩形宽和高
		ctx6.fillStyle = "#0f0";			//绘制填充样式
		ctx6.fillRect(0,0,100,100);			//填充颜色		x轴位置 y轴位置 矩形宽和高
		//居中矩形
		ctx6.fillRect(200,200,100,100);
		//清除画布的所有内容
		//ctx6.clearRect(0,0,500,500);
		//清除画布某个内容
		ctx6.clearRect(225,225,50,50);

		/******绘制文字******/
		var ctx = c1.getContext('2d');
		ctx.fillStyle = "#0f0";
		ctx.fillRect(100,215,300,25);

		//设置字体
		ctx.fillStyle = "#00f";				//设置字体颜色
		ctx.font      = "20px SimHei"		//设置文字大小和字体样式

		ctx.textBaseline = "alphabetic";	//设置文本基线	alphabetic默认
		var text = "文字gjt";
		ctx.strokeText(text,100,240);		//文本描边

		ctx.textBaseline = "bottom";		//设置文本基线	bottom基线上面
		var text = "文字gjt";
		ctx.fillText(text,170,240);			//文本填充

		ctx.textBaseline = "top";			//设置文本基线	top基线下面
		ctx.strokeStyle  = "#00f";
		var text = "文字gjt";
		ctx.strokeText(text,240,240);

		ctx.textBaseline = "middle";		//设置文本基线	middle基线中间
		var text = "文字gjt";
		var w = ctx.measureText(text).width;					//获得文字宽度
		var g = ctx.createLinearGradient(310,240,310+w,260);	//线性渐变 x轴起始位置 y轴起始位置 x轴到哪个位置结束 y轴到哪个位置结束 createRadialGradient(x1,y1,r1,x2,y2,r2)：径向渐变	前三个分别为起始圆的位置坐标和半径，后三个为终止圆的坐标和半径
		g.addColorStop(0,'red');			//偏移量和颜色值
		g.addColorStop(1/7,'orange');
		g.addColorStop(2/7,'yellow');
		g.addColorStop(3/7,'green');
		g.addColorStop(4/7,'blue');
		g.addColorStop(5/7,'indigo');
		g.addColorStop(6/7,'purple');
		g.addColorStop(1,'red');
		ctx.fillStyle = g;
		ctx.fillText(text,310,240);			//文本填充

		/*****绘制路径*****/
		var ctx2 = c2.getContext('2d');

		ctx2.moveTo(50,50);		//开始路径 x轴 y轴
		ctx2.lineTo(170,170);	//从上一个点到指定点画一条直线
		ctx2.lineTo(50,270);
		ctx2.strokeStyle = '#00f';
		ctx2.closePath();		//闭合路径
		ctx2.stroke();			//使用当前路径描边

		ctx2.beginPath();		//开始一条新路径
		ctx2.moveTo(200,50);
		ctx2.lineTo(320,170);
		ctx2.lineTo(200,270);
		ctx2.fillStyle = "#0f0";
		ctx2.fill();			//使用当前路劲填充

		/*****绘制圆形*****/
		var ctx3 = c3.getContext('2d');

		ctx3.arc(50,50,50,Math.PI,2*Math.PI);	//x轴起始位置  y轴起始位置 半径 起始弧度 结束弧度		弧度算法：deg*Math.PI/180
		ctx3.stroke();

		ctx3.beginPath();
		ctx3.arc(450,50,50,0,Math.PI);
		ctx3.fillStyle = "#0f0";
		ctx3.fill();

		ctx3.beginPath();
		ctx3.arc(0,450,50,270*Math.PI/180,90*Math.PI/180);
		ctx3.strokeStyle = "#0f0";
		ctx3.stroke();

		ctx3.beginPath();
		ctx3.arc(500,450,50,90*Math.PI/180,270*Math.PI/180);
		ctx3.fillStyle = "rgba(255,0,255,.5)";
		ctx3.fill();

		ctx3.beginPath();
		ctx3.arc(250,250,50,0,2*Math.PI);
		var g = ctx3.createRadialGradient(250,250,10,250,250,50);	//前三个分别为起始圆的位置坐标和半径，后三个为终止圆的坐标和半径
		g.addColorStop(0,"#0f0");
		g.addColorStop(0.5,"#00f");
		g.addColorStop(1,"rgba(255,0,0,.6)");
		ctx3.fillStyle = g;
		ctx3.fill();

		//圆形进度条
		ctx3.beginPath();
		ctx3.arc(250,250,100,0,2*Math.PI);
		ctx3.lineWidth = 20;				//线条宽度
		ctx3.strokeStyle = '#888';
  		ctx3.stroke();
  		var deg  = 0;
  		var time = setInterval(function() {
  			ctx3.beginPath();
  			deg += 5;
  			ctx3.arc(250,250,100,0,deg*Math.PI/180);
  			ctx3.lineWidth = 20;
  			ctx3.strokeStyle = "#0f0";
  			ctx3.stroke();
  			if (deg === 360) {
  				clearInterval(time);
  			}
  		},200);

  		//吃豆人
  		ctx3.beginPath();
  		ctx3.arc(200,50,50,45*Math.PI/180,315*Math.PI/180);
  		ctx3.lineWidth = 1;
  		ctx3.lineTo(200,50);
  		ctx3.closePath();
  		ctx3.stroke();
  		//眼睛
  		ctx3.beginPath();
  		ctx3.arc(200,20,10,0,2*Math.PI);
  		ctx3.lineWidth = 2;
  		ctx3.strokeStyle = "#000";
  		ctx3.stroke();
  		ctx3.fillStyle = "#00A2E8";
  		ctx3.fill();
  		//小眼睛
  		ctx3.beginPath();
  		ctx3.arc(205,18,3,0,2*Math.PI);
  		ctx3.fillStyle = "#fff";
  		ctx3.fill();

  		/*****绘制图像*****/
  		var ctx4   = c4.getContext('2d');
  		var img    = new Image();
  		img.src    = 'p1.png';
  		img.onload = function() {		//必须等待图片加载完成
  			var w = img.width;
  			var h = img.height;
  			ctx4.drawImage(img,0,0);	//把图片放到画布上 参数：图片 x轴位置 y轴位置
  			ctx4.drawImage(img,500-w,0);
  			ctx4.drawImage(img,0,500-h*2,100*2,81*2);
  		}

  		/*****图像跟随鼠标移动*****/
  		var ctx5 = c5.getContext('2d');
  		var img  = new Image();
  		img.src  = 'p1.png';
  		img.onload = function() {
  			ctx5.drawImage(img,250-img.width/2,250-img.height/2);
  			c5.onmousemove = function(e) {
  				var x = e.offsetX - img.width/2;
  				var y = e.offsetY - img.height/2;
  				ctx5.clearRect(0,0,500,500);
  				ctx5.drawImage(img,x,y);
  			}
  		}

  		/*****如何加载多张图片*****/
  		var progress = 0;		//100表示加载完成
  		var ctx7 = c7.getContext('2d');
  		var img  = new Image();
  		img.src  = 'p1.png';
  		img.onload = function() {
  			progress += 50;
  			if (progress === 100) {
  				draw();
  			}
  		}
  		var img2  = new Image();
  		img2.src  = 'p2.png';
  		img2.onload = function() {
  			progress += 50;
  			if (progress === 100) {
  				draw();
  			}
  		}
  		function draw() {
  			console.log('开始绘制图片');
  		}
	</script>
</body>
</html>


Carry-Lee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 canvas绘图
粥要熬。
09-09 492
canvas绘制图形canvas元素的基础知识在页面上放置一个canvas元素，就相当于在页面放置了一块画布，可以在其中描绘图形。事实上，canvas元素只是一个无色透明的区域，需要利用JavaScript编写在其中进行绘画的脚本。在页面放置canvas元素首先要指定的是ID、width、height三个属性<canvas id="canvas" width="400" height="300" /
html5使用js在canvas上绘图
wulong710的专栏
09-18 407
参考：https://www.runoob.com/html/html5-canvas.html <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>脚本</title> <style> canvas { background-
canvas：绘制动画——长嘴、闭嘴吃豆人
一只程序媛
08-30 2513
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; canvas{ back
Html5 Canvas绘图实例
绳锯木断，水滴石穿，专心写文，无问西东！！！
09-14 3945
前些年的时候，突然对Canvas感兴趣，利用空闲时间做一些Canvas小例子进行练习，仅供学习分享使用。如有不足之处，还请指正。 什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建 Canvas 元素及JavaScript对象 向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度，如下所示： <can
HTML5 Canvas 绘图教程一
一名全栈开发工程师
06-03 805
HTML5 的canvas元素提供了一种在网页上进行绘图的方式，通过 JavaScript，可以绘制图形、处理图像甚至创建动画和游戏。
基于HTML5 Canvas绘图技术应用.pdf
01-03
基于HTML5 Canvas绘图技术应用 HTML5 Canvas绘图技术是当前Web前端开发中的一种流行技术，具有强大且高效的绘图特性，广泛应用于客户端的游戏开发及图像处理中。 Canvas绘图技术具有以下几个优势： 1. 像素级别的...
基于HTML5 canvas绘图技术研究.pdf
01-03
"基于HTML5 canvas绘图技术研究" HTML5 是 W3C 推荐的下一代 Web 标准，它带来了许多新的特性和功能，其中 Canvas 元素是 HTML5 中的一个重要组件。Canvas 元素提供了一种使用 JavaScript 编程语言绘制图形的方法，...
HTML5 Canvas绘图示例.rar
07-10
这个“HTML5 Canvas绘图示例.rar”压缩包包含了一个具体的应用实例，教你如何利用Canvas API来画直线、图形以及进行各种图形操作。 首先，Canvas API的核心是`<canvas>`元素，它提供了一个二维渲染上下文，通过...
微信小程序之html5 canvas绘图并保存到系统相册
11-21
1. **Canvas绘图**： HTML5的Canvas是一个矩形区域，可以通过JavaScript API来绘制图形、文字、图片等。在微信小程序中，可以使用`canvas`组件，通过`canvasId`属性来指定对应的Canvas画布。例如，`<canvas class='...
获取当前点击的是哪个元素
热门推荐
Giraffe
07-13 1万+
用点击li元素为例 获取当前点击的元素 1 2 3 4 5 //第一种 var doms = document.querySelectorAll('ul li'); for (var i = 0; i < doms.length; i++) { !function(dom,index) { dom
html滑动开关按钮
Giraffe
09-17 1万+
按钮滑动开关 *{ margin: 0; padding: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } .slide-btn{ width:100px; display:inline-block; border:1px solid; border-color:
HTML的dpr
Giraffe
12-27 2784
只是为了自己以后查找方便，看不懂勿怪 DPI、PPI：屏幕像素密度或屏幕每英寸的像素数量 dips：手机尺寸或独立像素 物理像素 = 手机分辨率 dpr = window.devicePixelRatio（js可以拿到） css定义 psd转换rem单位 rem = px / 基准值 基准值 = 手机宽高 * dpr / 10 乘以dpr是因为页面有可能缩放 除以10是为了取整
pc端和移动端顶部加载条
Giraffe
09-01 1382
简单的写了一下  详细请参考官网  https://github.com/rstacruz/nprogress demo //NProgress.start() — 显示进度条 //NProgress.set(0.4) —设置百分比 //NProgress.inc() — 增加一点点 //NProgress.done() — 完成进度条 N
原生js访问json
Giraffe
09-12 954
var xml; if (window.XMLHttpRequest) { xml = new XMLHttpRequest(); }else if(window.ActiveXObjec) { xml = new ActiveXObject("Microsoft.XMLHTTP"); } if (xml != null) { xml
HTML5canvas移动
Giraffe
07-21 464
Document body{ text-align:center; } #c1{ background-color:#efefef; } 绘制图形 //来回移动矩形 var x = 0; var y = 400; var direction = 1; //移动方向 1表示向右移 -1表示向左移
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 1261
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
HTML5好看的花店商城源码3
最新发布
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
09-05 1227
HTML5好看的花店商城源码3，花店商城源码，最全商城模板，花店模板，一款大气的网上花店/鲜花店购物商城HTML模板，内置三十个模板页面，覆盖各种商城需求页面，，酷炫的界面效果，简易的整体风格，实现了商店的所需功能，登录，注册，网格列表，信息列表，我的订单，轮播图，表单，导航菜单，购物车，列表等，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
HTML5 Canvas绘图精华指南
"《Canvas袖珍参考手册(第1版)》是David Flanagan撰写的一本关于HTML5 Canvas API的详细指南，旨在帮助读者理解和掌握Canvas绘图技术。" 在HTML5中，Canvas是一个强大的图形绘制接口，允许开发人员通过JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值