canvas 的简单运用

最新推荐文章于 2023-07-05 19:11:54 发布

laxexue

最新推荐文章于 2023-07-05 19:11:54 发布

阅读量173

点赞数

分类专栏： HTML canvas 文章标签： canvas 的简单运用

本文链接：https://blog.csdn.net/laxexue/article/details/82985955

版权

canvas 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

1.在html5中使用

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;" width="1024" height="768">
		
	</canvas>
	<!-- 
		1.不设置宽和高默认300*150
		2.不支持css设置，canvas还有像素的考虑
		3.以左上角为原点
	 -->

</body>
</html>

2.用JavaScript进行绘制

1）先找到对象

var canvas = document.getElementById('canvas');

2）可以用JavaScript设置

canvas.width = 1024;
canvas.height = 768;

3）先判定浏览器是否执行canvas，执行创建对象

if(canvas.getContext('2d')){
 var context = canvas.getContext('2d');
}else{
 alert('当前浏览器不支持canvas，请更换浏览器再试');
}

4）绘制一条直线

context.moveTo(10,10);//起始坐标
context.lineTo(500,10);//终点坐标

5）绘制一个多边形

context.moveTo(20,20);
context.lineTo(200,200);
context.lineTo(20,200);
context.lineTo(20,20);

注意：线条的绘制后面添加

context.stroke();

6）如果绘制多个在开始添加

context.beginPath();

结束添加

context.closePath();

7）多边形填充颜色

context.fillStyle = "rgb(2,100,30)";
context.fill();
context.stroke();

8）设置线条

 context.lineWidth = 5;//宽度
 context.strokeStyle = "#005588";
 context.strokeStyle = "red";

两种不同的颜色写法，均可以用

9）绘制圆

context.arc(cx,cy,r,sAng,eAng,anticlock=false);

10）指定一个矩形区域刷新

context.clearRect(x,y,width,height);

11）绘制动画

setInterval(
    function(){//函数表示每一帧干什么
        render(); 
        update();
    },50//时间每隔多长时间 毫秒
);

12）lineJoin

miter(默认)

bevel (角是平的)

round (角是圆的)

laxexue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录