canvas基本用法

最新推荐文章于 2024-05-29 11:16:42 发布

编程界小明哥

最新推荐文章于 2024-05-29 11:16:42 发布

阅读量1.5w

点赞数 2

分类专栏： canvas 文章标签： canvas

本文链接：https://blog.csdn.net/dkm123456/article/details/112604113

版权

canvas 专栏收录该内容

42 篇文章 8 订阅

订阅专栏

首先创建canvas元素

width和height 也可以不指定，canvas会初始化宽度为300像素和高度为150像素

可以用CSS来指定这两个值，但如果css 尺寸与初始画布的比例不一致，它会出现扭曲，所以官方建议用js来设置 width和height这两个属性。

var canvas = document.getElementById('canvas');
		canvas.width='300';
		canvas.height='300';

注意：canvas.width='300'; 没有px哦，不然指定不成立。

获取上下文

var ctx = canvas.getContext('2d');

这个上下文就是绘画的基础，后面所有的动作都是要在这个上下文中操作。

<body>
	<canvas id='canvas' ></canvas>
</body>

<script type="text/javascript">
		
	window.onload=function(){
		var canvas = document.getElementById('canvas');
		canvas.width='300';
		canvas.height='300';
		var ctx = canvas.getContext('2d');
		
		//在x轴为10，y轴为10的位置画长为120，宽为80的长方形
		ctx.strokeRect(10,10,120,80);
		//在x轴为120，y轴为120的位置画长为160，宽为100的长方形
		ctx.strokeRect(120,120,160,100);
	}

上面代码得到的效果就是下图

编程界小明哥

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
1
评论
canvas基本用法

首先创建canvas元素<canvas id="canvas" width="150" height="150"></canvas>width和height 也可以不指定，canvas会初始化宽度为300像素和高度为150像素可以用CSS来指定这两个值，但如果css尺寸与初始画布的比例不一致，它会出现扭曲，所以官方建议用js来设置 width和height这两个属性。var canvas = document.getElementById('canvas'); .
复制链接

扫一扫