Canvas学习笔记(六)--绘图（综合使用）

最新推荐文章于 2024-07-12 16:31:27 发布
最新推荐文章于 2024-07-12 16:31:27 发布
阅读量124 收藏
点赞数
分类专栏： web前端 html5 canvas 文章标签： web前端 html5 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ice_i_snow/article/details/84166139
版权
web前端 同时被 3 个专栏收录
15 篇文章 0 订阅
订阅专栏
html5
8 篇文章 0 订阅
订阅专栏
canvas
8 篇文章 0 订阅
订阅专栏

首先看看需要完成的图像：

 

代码如下：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  	<style type="text/css">
		.wraper {
			position: relative;
			border: 1px solid orange;
		}
  	</style>
	<script type="text/javascript">
		function draw(){
			var can = document.getElementById('test');
			if(can.getContext){
				var cxt = can.getContext('2d');

				//绘制左侧黑色区域
				cxt.beginPath();
				cxt.arc(100,100,80,Math.PI*0.5,Math.PI*1.5,false);
				cxt.bezierCurveTo(20,100,180,100,100,180);
				cxt.fill();

				//绘制右侧白色区域
				cxt9.beginPath();
				cxt.arc(100,100,80,Math.PI*0.5,Math.PI*1.5,true);
				cxt.stroke();

				//绘制右侧黑色圆圈
				cxt.beginPath();
				cxt.moveTo(120,60);
				cxt.arc(120,60,15,0,Math.PI*2,true);
				cxt.fill();

				//绘制左侧白色圆圈
				cxt.fillStyle = "rgba(255,255,255,1)";
				cxt.beginPath();
				cxt.moveTo(80,140);
				cxt.arc(80,140,15,0,Math.PI*2,true);
				cxt.fill();

			}
		}
	</script>
  </head>	
  
  <body οnlοad="draw();">
	
	<canvas id="test" width="200px" height="200px" class="wraper"></canvas>

  </body>
</html>
 

 

 

 

 

ice_i_snow
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas画布变换画六芒星
熊猫正尽责
11-09 5829
要求使用canvas的画布变换方法。 效果如下： 代码如下： 六芒星 var canvas = document.querySelector('#canvas'), context = canvas.getContext('2d'); var width = canvas.width, height = canvas.height;
绘制六芒星战斗力属性图 —— h5 canvas 初体验
热门推荐
Platonic Time
09-01 1万+
最近用MUI做Web app时想实现一个六芒星战斗力图的（类似LPL赛前战队实力分析图）效果，由于正多边形是十分规则的，所以感觉很轻易就可以用h5 canvas来实现。
体会HTML5的canvas元素之图表练习源码
11-20
体会HTML5的canvas元素之图表练习源码
JS实现六角图绘制
12-12
JS实现六角图绘制，包含源代码和调用说明。 所谓六角图 就是利用功率表测量电流相位的一种方法，它是一种简单有效的相位检测方法。利用六角图能正确的判断出： 1)同一组电流互感器三相电流之间的相位是否正确。 2)功率方向继电器接线是否正确。 3)差动保护中不同组别电流互感器的电流相位是否正确。 4)电流互感器变比是否正确。因此，向量六角图在实际应用中具有相当广泛的用途。 六角图的原理 在一定坐标系统中，任何相量都可以用它在任何两个相交轴上的垂直投影来表示。根据这一原理，我们采用的坐标系统是互成120’的三相对称电压系统。由于线电压不受零序电压的干扰，所以采用三相线电压作为测量三相电流相位的基准量。在相量图中，被测电流在一个电压相量上的投影，可以确定该电流相量端点的轨迹；在两个电压相量上的投影，可以确定被测电流相量端点的位置(即电流的相位和大小)；用此方法得出不同方向的电流数值，进行矢量计算，即可检验结果的准确性。
canvas学习总结六：绘制矩形
diannai2478的博客
07-31 181
在第三章中（canvas学习总结三：绘制路径-线段）我们提高Canvas绘图环境中有些属于立即绘制图形方法，有些绘图方法是基于路径的。 立即绘制图形方法仅有两个strokeRect(),fillRect(),两个方法都是用来绘制矩形的。 Canvas的API提供了如下三个方法，分别用于矩形的清除，描边与填充 clearRect(x, y, w, h): 清除指定区域，使其为全透...
Canvas学习笔记四 - 使用图像
blog
03-26 272
canvas更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。 你甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。 引入图像到canvas里需要以下两步基本操作： 获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片（参见例子） 使用drawImage()函数将图片绘制到画布上
Canvas学习笔记二 - 样式和颜色
blog
03-26 435
颜色 Colors 方法 说明 fillStyle = color 设置图形的填充颜色。 strokeStyle = color 设置图形轮廓的颜色。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
canvas学习笔记4--刮刮卡
weixin_44679078的博客
10-25 177
globalCompositeOperation 该属性设置或返回如何将一个源（新的）图像绘制到目标（已有的）的图像上。 源图像 = 你打算放置到画布上的绘图 目标图像 = 你已经放置在画布上的绘图 <canvas id="canvas" width="800" height="600"></canvas> <script> var canvas = document.querySelector("#canvas") var ctx = canvas.getCo
LVGL学习笔记 22 - 画布Canvas
pq的博客
03-15 5867
Canvas 继承自Image，用户可以在其中绘制任何内容。由lv_canvas_create创建。画布需要先分配足够空间的缓冲区来存储绘制的图像buffer必须是一个静态缓冲区，大小是(lv_img_cf_get_px_size(cf) * w) / 8 * h)，可以通过lv_mem_alloc()分配或静态数组或RAM(SRAM)的地址。w,h是画布的长宽cf是画布的图像格式此时由于buffer中的数据是全0，显示出来的就是黑色方块。所以，对画布的操作其实是对buffer的处理。
canvas学习笔记-绘图坐标系
weixin_33893473的博客
01-28 955
1. 坐标系 画布左上角(0,0)默认原点 x坐标向右方增长，y坐标则向下方延伸 (图片来自mdn) 不过，Canvas的坐标系统并不是一尘不变的，原点是可改变的。 坐标变换：可以对Canvas坐标系统进行移动translate、旋转rotate和缩放等操作。 坐标变换之后绘制的图形x,y偏移量都以新原点为准， 旋转角度，缩放比，以新...
canvas学习笔记之2d画布基础的实现
01-21
< canvas> 是一个可以使用脚本（通常是js）来绘图的HTML元素 < canvas> 最早由Apple引入WebKit，用于Mac OS X 的 Dashboard和 Safari 如今，所有主流的浏览器都支持它（IE9+,更低版本需引入Explorer Canvas来支持） ...
canvas学习笔记之绘制简单路径
09-22
在HTML5中，Canvas元素提供了一个强大的2D绘图环境，允许开发者动态地在网页上绘制图形。本篇文章将深入探讨Canvas的绘制简单路径，包括线段、矩形和圆弧路径的创建方法。 首先，我们来看线段（直线路径）的绘制。...
canvas学习之API整理笔记（二）
11-29
在canvas的学习过程中，掌握API是至关重要的。在第一篇文章中，我们了解了基本的绘图API、简单的变换和动画。接下来，我们将深入探讨更高级的动画技术、像素操作以及性能优化，通过实例来帮助理解这些概念。 首先，...
canvas-note:《Canvas开发笔记》(不定时更新)
05-08
《Canvas开发笔记》是一部关于HTML5 Canvas的详细学习资料，主要涵盖了从基本的二维场景绘制到复杂的图像处理和动画制作等内容。以下是对这些知识点的详细解释： 1. **Canvas基本概念**：HTML5 Canvas是一个基于...
HTML5 Canvas学习笔记(1)处理鼠标事件
08-06
这篇“HTML5 Canvas学习笔记(1)处理鼠标事件”着重讲解了如何利用Canvas API来监听和响应鼠标的点击、移动等事件。 Canvas API提供了几个关键的方法来处理鼠标事件，包括`addEventListener`用于绑定事件处理函数，`...
基于cocos creator画六维图
过客2019
09-18 5137
这个仅仅是一个代码例子。 1.cocos creator的左下方资源管理器，点右键，弹出菜单，创建一个Scene,默认名称就可以。 2.同样在再创建一个JavaScript，名称为drawsix 3.然后在双击这个scene，进入这个场景的编辑。在cocos creator的左上角的层级管理器的Canvas点，右键菜单创建一个空节点。 4.在左上角的层级管理器，选中这个节点，右...
canvas标签画正多边形函数
难得溜达到此
02-27 3746
/* *以(x,y)为中心，半径为r的正n边形 *@param c 是canvas的上下文对象 *@param angle 是第一个点(以最上面的顶点为准)偏离中心点(x,y)的弧度 * angle为0时第一个点和中心的x想等，如第一个正方形 #@param counterclockwise 是angle偏离是顺时针还是逆时针 */ function polygon(c,n,x,y
html5——CSS3_文本样式属性
最新发布
jiuyuexixi的博客
07-12 239
html5——CSS3_文本样式属性
前端基础学习总结（看大佬文章）
12-02
另外，我还了解了HTML5的一些新特性，比如语义化标签、音视频标签、Canvas绘图等，可以让网页更加功能丰富和友好。 其次是CSS，它是用来控制网页样式和布局的样式表语言。我学会了如何使用CSS选择器来选中HTML元素...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值