canvas基础一

最新推荐文章于 2024-03-21 17:41:45 发布
最新推荐文章于 2024-03-21 17:41:45 发布
阅读量120 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TISRNW/article/details/103150977
版权

一些关于画布的基础知识，一些小的效果在以后会写一些
我写在一起了，可以分别来练一练
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>canvas基础知识掌握</title>
		<style type="text/css">
			body {
				background-color: red;
			}

			* {
				margin: 0px;
				padding: 0px;
			}

			#can {
				background-color: black;
			}
		</style>
	</head>
	<body>
		<canvas id="can"></canvas>
		
		<script type="text/javascript">
			var canvas = document.getElementById('can')
			var c = canvas.getContext('2d') //通过这句话，我们获取了画布的绘图环境
			//设置画布的宽和高和背景颜色
			canvas.width = window.innerWidth
			canvas.height = window.innerHeight
			canvas.style.backgroundColor = 'black'
			//一：画线
			//1,普通实线段c.moveTo()  c.lineTo()
			c.beginPath()
			c.moveTo(100, 100)
			c.lineTo(400, 400)
			c.lineTo(500, 234)
			c.lineTo(133, 400)
			c.lineTo(567, 711)
			c.strokeStyle = 'white'
			
			c.closePath()
			c.stroke()
			//2,虚线 setlineDash()
			c.beginPath()
			c.moveTo(200, 200)
			c.lineTo(250, 250)
			c.lineWidth = '5'
			c.lineCap = 'round'
			c.setLineDash([2, 10]) //里面传入一个数组，数组第一位是虚线颗粒的长度
			//第二位是虚线颗粒的距离
			c.strokeStyle = 'red'
			c.stroke()
			c.closePath()
			//二：画矩形
			//1，实心矩形c.fillRect()
			c.beginPath()
			c.fillStyle = 'navajowhite'
			c.fillRect(0, 0, 30, 20)

			c.closePath()
			//2,画空心
			// c.beginPath()
			c.strokeStyle = 'white'
			c.strokeRect(50,50,100,200)
			// c.closePath()
			//三：文本
			c.fillStyle = 'white'
			c.font = '30px 微软雅黑'
			c.fillText('dajfak',200,300)
			//四：画弧
			c.arc(600,600,100,0,2*Math.PI,true)
			c.stroke()
			
			//路径的起始和结束
			c.beginPath()
			c.closePath()
			
		</script>
	</body>
</html>
雕琢时光纸戆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
24个canvas基础知识小结
09-28
主要介绍了24个canvas基础知识小结,非常全面详尽，推荐给大家。
Android中Canvas绘图基础详解
11-11
该代码是一个完整的Android工程，详细演示如了如何使用Android中的各种drawXXX方法，以及画笔Paint如何影响绘制的效果。 具体参见博文： http://blog.csdn.net/iispring/article/details/49770651
canvas基础
qq_48113035的博客
02-05 3050
一、canvas介绍 1.canvas是HTML5新增的一个双闭合标签，它目前能够提供2D图形的绘制，为数据可视化提供基础。它就相当于一块画布，js是画笔。 2.canvas注意点 --canvas标签浏览器默认是一张300*150像素的图片。 --canvas标签内部书写的文字或其他标签等都不会显示。 --canvas标签可以设置width|height属性，来确定画布的宽高，宽高不要在css中书写，因为当在canvas标签中设置width|height属性时，css中设置的宽高会无效。 3.
canvas基础应用
最新发布
m0_45093055的博客
03-21 647
Canvas 的使用场景非常广泛，主要用于实现各种图形、动画、游戏、图像处理和交互效果，接下来主要从水印效果、柱状图、个人签名、球在屏幕上弹跳的效果四种场景来总结。// 使用 toDataURL 方法将 canvas 内容转换为图片数据的 URL。// 获取 img 元素并设置其 src 属性为图片数据的 URL。// 获取 canvas 元素和绘图上下文。// 监听鼠标离开canvas事件。// 该方法只允许调用一次。// 监听鼠标按下事件。// 监听鼠标移动事件。// 监听鼠标松开事件。
vue canvas 基础入门
热门推荐
qq_41399901的博客
05-26 2万+
vue canvas 基础入门vue canvas 基础入门Canvas Apicanvas Init 初始化canvas 绘制 vue canvas 基础入门 Canvas Api 话不多说、先了解下canas 的api https://www.canvasapi.cn/ 可以看出，canvas 的api 还不是很复杂 首先了解下入口函数： getContext() getContext 的参数有四种类型 2d | webgl | webgl2 | bitmaprenderer 由于是入门教程，这里只举
canvas基础：绘制虚线
大剑师兰特的GIS世界
12-02 1304
canvas 用 `setLineDash` 方法和 `lineDashOffset` 属性来制定虚线样式。 setLineDash 方法接受一个数组，来指定线段与间隙的交替；lineDashOffset属性设置起始偏移量。
canvas基础：渲染文本
大剑师兰特的GIS世界
12-02 267
专栏提供canvas的基础知识，高级动画，相关应用扩展等信息。canvas作为html的一部分，是图像图标地图可视化的一个重要的基础，学好了canvas，在其他的一些应用上将会起到非常重要的帮助。
Android Canvas : 1 基础介绍
flycatdeng的专栏
11-23 989
目录 1.1 是什么？ 1.2 与Surface的区别与联系 1.3 底层实现 1.3.2 追踪证明 参考 1.1 是什么？ Android中Canvas类常用于自定义View等操作中，canvas则如同一张画布可以在上面绘制内容，然后这张画布也可以叠加其他的图层或者平移旋转等操作。 Canvas对象的获取方式有两种：一种我们通过重写View.onDraw方法，View中的Canv...
canvas基础使用方法
weixin_45815557的博客
03-30 670
使用canvas的时候，必不可少的有几点： 1.需在视图中写如canvas标签，并设置一个id属性，以及画布的大小（画布的大小只能写在标签中，写在样式里面是无效的） <canvas width="500" height="500" id="canvas"></canvas> 在JavaScript中需要获取画布和上下文 var can = document.getElementById("canvas") var ctx = can.getContext("2d") 1、
canvas基础-1
qq_38948398的博客
01-06 95
html部分 <canvas id="canvas"> 没有出现图形，说明您的浏览器不支持 HTML5 canvas 标签。 </canvas> css部分 canvas { width: 200px; height: 100px; display: block; ...
1.canvas基础
burningdzb的博客
03-19 208
1.canvas的引入 <canvas id=“canvas” width=“1024” height=“768” style=“border:1px solid #aaa;display: block;margin: 50px auto;”> 这一行引入canvas设置了width和heigth设置画布宽高，style设置了边框颜色大小和内边距 canvas 元素本身是没有绘图能力的...
Canvas 基础绘制
03-29
以下所有 set 打头的方法均为微信小程序特有, 去掉 set 即为 CanvasRenderingContext2D 的属性名. .stroke() 描出当前路径  .setStrokeStyle(color) 设置路径颜色  .setLineWidth(Number ....moveTo() 创建一
canvas基础代码教程
03-19
这个"canvas基础代码教程"包含了一系列HTML页面，每个页面都可能是对Canvas使用的一个实例或者一个具体知识点的讲解。 首先，我们可以从文件名中推测教程的结构。13.html、15.html、18.html、07.html、22.html、09....
一波HTML5 Canvas基础绘图实例代码集合
09-28
在本篇文章中，我们将探讨Canvas的基础绘图实例，包括圆形、矩形、圆角等基本图形的绘制方法。 首先，我们需要获取Canvas元素并创建2D渲染上下文。这是通过以下代码实现的： ```javascript var canvas = document....
HTML写一个登录框样式
TISRNW的博客
09-19 1万+
以QQ空间的登陆框为例，原先的代码很复杂，还涉及了其他的知识，对于刚刚接触的人来说想写一点点样式来练练手的话可以看一下。 写好之后是这个样子 下面是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <styl...
用js做一个简单的计算器
TISRNW的博客
10-29 1757
实现并不困难 1，我们首先把样式写出来 2，写出来之后我们用js获取我们每次点击的数值，将其运算等等并将其填充到我们写的显示屏上。 3，对于清零，取反，取百分数代码中有详细说明。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title&g...
轮播图（点击小点点让他跳转到具体某一张）
TISRNW的博客
10-25 1623
轮播图的原理前几篇说过一些 现在加上一些点点击让他轮播 具体就是自己添加一个标签，获取之后知道他是哪一张进行显示就可以了。 下面是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="t...
js入门 （用wasd来移动一个小色块）
TISRNW的博客
10-23 808
获取你的事件按钮之后，就可以根据键位来改变小色块的位置。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0px; ...
HTML5 Canvas基础教程：JavaScript绘图入门
HTML5 Canvas 入门基础教程 Canvas是HTML5引入的一种强大的图形绘制技术，它允许开发者通过JavaScript脚本来在网页上创建动态图形、图表、图像合成或简单的动画效果。Canvas元素与传统的元素类似，但有明显的区别：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值