Canvas的基本使用

已于 2023-02-20 17:32:12 修改
阅读量249 收藏
点赞数
分类专栏： # Canvas 文章标签： javascript 前端 开发语言 canvas
于 2022-09-28 18:28:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengsheng5210/article/details/127094446
版权

Canvas基本使用

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas1" width="500" height="500" style="border:1px solid pink;"></canvas>
	</body>
</html>

绘制直线

<script>
	// 取到canvas画布元素
	let canvas =  document.getElementById("canvas1");
	// 取到canvas上的画笔
	let gd = canvas.getContext("2d");
	gd.moveTo(0,500);   // 起始点
	gd.lineTo(200,100);   
	gd.lineTo(500,400);
	gd.strokeStyle="green";
	gd.stroke();
</script>

在这里插入图片描述

绘制矩形

方法一

<script>
	// 取到canvas画布元素
	let canvas =  document.getElementById("canvas1");
	// 取到canvas上的画笔
	let gd = canvas.getContext("2d");
	gd.moveTo( 10, 10 );
	gd.lineTo( 300, 10 );
	gd.lineTo( 300, 200 );
	gd.lineTo( 10, 200 );
	gd.lineTo( 10, 10 );
	gd.strokeStyle = "blue";
	gd.stroke();                  // 绘制
</script>

在这里插入图片描述

方法二

<script>
	// 取到canvas画布元素
	let canvas =  document.getElementById("canvas1");
	// 取到canvas上的画笔
	let gd = canvas.getContext("2d");
	gd.rect( 10, 10, 300, 80 );   // 定形状
	gd.strokeStyle = "blue";
	gd.stroke();                  // 绘制
</script>

在这里插入图片描述

绘制多边形

<script>
	// 取到canvas画布元素
	let canvas =  document.getElementById("canvas1");
	// 取到canvas上的画笔
	let gd = canvas.getContext("2d");
	gd.moveTo( 20, 30 );
	gd.lineTo( 300, 20 );
	gd.lineTo( 350, 200 );
	gd.lineTo( 280, 330 );
	gd.lineTo( 70, 290 );
	gd.closePath();         // 闭合路径

	gd.strokeStyle = "blue";
	gd.stroke();
</script>

在这里插入图片描述

不见长安见晨雾
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java awt canvas_java.awt 类 Canvas - Java 中文参考手册
weixin_28077113的博客
02-13 354
java.lang.Objectjava.awt.Componentjava.awt.Canvas所有已实现的接口：ImageObserver, MenuContainer, Serializable, javax.accessibility.Accessiblepublic class Canvasextends Componentimplements javax.accessibility.A...
java canvas详解_[Java教程]初学 Canvas 第一篇
weixin_33150295的博客
02-16 4065
[Java教程]初学 Canvas 第一篇0 2016-10-08 10:00:11本文摘自：兴趣部落大神(为你一生画眉)-讲一讲canvas究竟是个啥？HTML5 的标准已经出来好久了，但是似乎其中的 Canvas 现在并没有在太多的地方用到。一个很重要的原因是，Canvas 的标准还没有完全确定，不适合大规模用在生产环境。但是，Canvas 的优点也是很明显的，例如在绘制含有大量...
Java 通过Canvas实现绘图功能.rar
07-10
Java 通过Canvas实现绘图功能源代码，可以画出直线、矩形、圆角矩形、三角形、文字等，把缓冲区图像的内容绘制到画布上，重载抽象类MIDlet的抽象方法startApp()，重载抽象类MIDlet的方法destroyApp()，Java Canvas绘图程序，新手必看代码。
java画布canvas_使用Canvas在Java中绘图
weixin_35411480的博客
02-21 3699
以下应该有效：public static void main(String[] args){final String title = "Test Window";final int width = 1200;final int height = width / 16 * 9;//Creating the frame.JFrame frame = new JFrame(title);frame.se...
【Java AWT 图形界面编程】Canvas 组件中使用 Graphics 绘图 ③ ( 绘图步骤 | 绘图案例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
01-15 1167
一、绘图步骤、 二、绘图代码示例
java canvas 打开图片_一步步教你利用Canvas对图片进行处理
weixin_34023576的博客
02-27 946
前言Canvas，中文译为“画布”，HTML5中新增了元素，可以结合JavaScript动态地在画布中绘制图形。今天，我们不讲Canvas的图形绘制，而是讲如何对图片进行处理，话不多说了，来一起看看详细的介绍吧。大概流程非常简单，主要分为以下三个步骤：Canvas图片处理是的，就像把大象装进冰箱一样简单，哈哈。一、主要API整个流程中所用到的主要Canvas API有：绘制图像： drawImag...
java canvas 画线_canvas教程(二) 绘制直线
weixin_31423955的博客
02-13 595
经过而本次是给大家带来直线的绘制canvas 中，基本图形有两种，一种是直线，还有一种是曲线但是无论是直线还是曲线，我们都应该先了解 canvas 的坐标系 scanvas 的坐标系要绘制之前肯定要了解一下 canvas 的坐标系，我们之前肯定接触过数学坐标系：y 轴正方向是向上的其实在前端领域里几乎所有的坐标系都是使用的 w3c 的坐标你，canvas 也是一样，w3c 的坐标系和数学坐标系的区...
canvas基本用法
ICY___的博客
02-19 383
canvas是一个强大的绘图及制作动画和游戏手段，下面介绍canvas利用js的API实现基本画图功能。 划线： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
canvas 基本demo
12-09
"canvas 基本demo"是一个利用AntV G6库实现的Canvas应用示例，它展示了如何在React环境中使用Canvas进行图形交互和自定义设计。 首先，AntV G6是一款强大的图形图表库，它专为数据可视化设计，支持多种图表类型，如...
canvas基本画图功能
10-25
canvas，canvas UI，canvas画图功能
HTML5 canvas 基本语法
09-28
不过要注意，虽然大多数现代浏览器都支持2D canvas，但在老版本的浏览器中可能不被支持，因此在使用canvas时应提供适当的回退内容，以确保兼容性。通过熟练掌握canvas的基本语法和API，开发者能够创建出丰富多样的...
使用canvas绘制钟表
11-06
这个过程涉及了canvas的基本绘图方法（如arc、beginPath、lineTo、stroke等），角度转换（Math.cos和Math.sin），以及动态更新图形的方法（通过setInterval）。通过深入理解和实践，你可以利用canvas实现更多复杂的...
详解HTML5 canvas绘图基本使用方法
09-28
绘制线段是canvas的基本操作之一。`moveTo(x, y)`方法用来设定当前路径的起点，而`lineTo(x, y)`则从当前点到指定点画出一条直线。例如，如果我们要从(10,10)画到(200,200)，需要先调用`moveTo(10,10)`，然后调用`...
java MyCanvas用法_[Java教程][HTML5] Canvas绘制简单形状
weixin_31455121的博客
02-25 614
[Java教程][HTML5] Canvas绘制简单形状0 2016-05-11 16:00:13使用canvas来进行绘画，它像很多其他dom对象一样，有很多属性和方法，操作这些方法，实现绘画获取canvas对象，调用document.getElementById()方法调用canvas对象的getContext()方法，获取context对象，参数：String的”2d”绘制线段...
java canvas详解_HTML5的canvas绘图技术详解
weixin_39962199的博客
02-16 728
原标题：HTML5的canvas绘图技术详解本篇教程探讨了HTML5的canvas绘图技术详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。<canvas元素是HTML5中新添加的一个元素，该元素是HTML5中的一个亮点。Canvas元素就像一块画布，通过该元素自带的API结合Java代码可以绘制各种图形和图像以及动画效果。1.1 浏览器不兼容问题ie9以上...
java 图形化小工具Abstract Window Toolit ：画笔Graphics，画布Canvas()，弹球小游戏
lmrylll的博客
04-29 2594
开发思路：动画，就是间隔一定的时间(通常小于1秒)重新绘制新的图像，两次绘制的图像之间差异较小，肉眼看起来就成了所谓的动画。这个程序我们要借助Swing包的一个Timer类。Java中提供了Graphics类，他是一个抽象的画笔，可以在Canvas组件(画布)上绘制丰富多彩的几何图和位图。，程序可以通过创建Canvas的子类，并重写它的paint()方法来实现绘图。AWT专门提供了一个。
java画布canvas_画布（Canvas类）初探
weixin_39607090的博客
02-15 1491
代码/*在画布上绘画*/import java.awt.*;import java.awt.event.*;//AvctrionListener,AvctionEventpublic class sample64 extends Frame{Button btn = new Button("退出");sample64(){setTitle("Canvas的子类");setVisible(true)...
【Java AWT 图形界面编程】Canvas 组件中使用 Graphics 绘图 ② ( AWT 绘图步骤 | Graphics 绘图常用 API )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
01-15 1823
一、AWT 绘图步骤、 二、Graphics 绘图常用 API
LibreOffice的国内镜像安装地址和node.js国内快速下载网站
最新发布
小丁的博客
07-08 320
国内镜像包网址：https://mirrors.cloud.tencent.com/libreoffice/libreoffice/
java canvas graphics_android.graphics Canvas基本使用 转
06-09
好的，我可以为您解答关于Java Canvas 和 Android.graphics.Canvas的基本使用。 Java Canvas是一个在awt，swing等GUI框架中用于绘制图形的类，它提供了一个类似画布的面板，我们可以在上面绘制各种图形和文字。 下面是Java Canvas的基本使用方法： 1. 创建一个Canvas对象： ``` Canvas canvas = new Canvas(); ``` 2. 获得一个Graphics对象： ``` Graphics g = canvas.getGraphics(); ``` 3. 使用Graphics对象绘制图形： ``` g.drawLine(0, 0, 100, 100); g.drawRect(50, 50, 100, 100); g.drawOval(100, 100, 50, 50); g.drawString("Hello, World!", 200, 200); ``` 这些方法可以绘制线条，矩形，椭圆和文本。 在Android中，Canvas是一个类用于绘制图形和文字，我们可以使用它来自定义视图或绘制自己的UI元素。 下面是Android.graphics.Canvas的基本使用方法： 1. 创建一个Canvas对象： ``` Canvas canvas = new Canvas(bitmap); ``` 这里的bitmap是我们要绘制的位图对象。 2. 使用Canvas对象绘制图形： ``` Paint paint = new Paint(); paint.setColor(Color.RED); paint.setStrokeWidth(5); canvas.drawLine(0, 0, 100, 100, paint); canvas.drawRect(50, 50, 100, 100, paint); canvas.drawOval(100, 100, 150, 150, paint); canvas.drawText("Hello, World!", 200, 200, paint); ``` 这些方法可以绘制线条，矩形，椭圆和文本。我们可以使用Paint对象来设置绘制的颜色，线条宽度等属性。 以上就是Java Canvas和Android.graphics.Canvas的基本使用方法，希望能对您有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值