canvas代码解释

最新推荐文章于 2023-08-08 15:04:02 发布

敢跟头像对视三秒吗？

最新推荐文章于 2023-08-08 15:04:02 发布

阅读量277

点赞数

分类专栏： CANVAS

本文链接：https://blog.csdn.net/weixin_45769564/article/details/119059208

版权

CANVAS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

画布

目的：为解决高性能载入问题
作用：通过结合js来绘制各种图形
功能：绘制图形（矩形，曲线，圆）图案，动画，游戏开发

比较canvas和svg

canvas
使用js动态生成
基于位图（像素），不要随便放大缩小
修改后重绘
相当于ps

svg
使用xml静态描述
基于矢量（公式），不失真
修改后不需要重绘
相当于ai

代码

实际上画布是再在js上操作的
在使用画布时首先要讲话不加载到页面上

<body>
		<canvas id="cv1" width="300" height="300" style="border: 1px solid red;">
			
			
			
			
		</canvas>
	
	</body>

然后在js里面写你要在canvas中的具体操作就可以了

<script type="text/javascript" charset="utf-8">
		window.onload=function(){
			// alert("载入完成")
			// 获取canvas节点
			var cv1=document.getElementById("cv1");
			var ct1=cv1.getContext("2d");
			// console.log(cv1)
			ct1.moveTo(50,50);//移动画笔起点到x=50，y=50的位置
			ct1.lineTo(250,50);//从起点滑倒x=250，y=50的位置，这个为值此时作为起点
			ct1.lineTo(150,150);
			ct1.lineTo(50,50);
			
			
			
			
			
			
			
			ct1.stroke();//表示真正的画出来
			
			
		}
		</script

效果

在这里插入图片描述

代码解释

敢跟头像对视三秒吗？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
16
评论
canvas代码解释

画布目的：为解决高性能载入问题作用：通过结合js来绘制各种图形功能：绘制图形（矩形，曲线，圆）图案，动画，游戏开发比较canvas和svgcanvas使用js动态生成基于位图（像素），不要随便放大缩小修改后重绘相当于pssvg使用xml静态描述基于矢量（公式），不失真修改后不需要重绘相当于ai代码实际上画布是再在js上操作的在使用画布时首先要讲话不加载到页面上<body> <canvas id="cv1" width="300" height="30
复制链接

扫一扫