源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 317|回复: 14

[html5] html5清空画布方法(三种)

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2017-10-16 11:37:33 | 显示全部楼层 |阅读模式
本篇文章主要介绍了html5清空画布方法(三种),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

总结以下三种清空canvas画布的方式:

1. 最简单的方法:由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空:

function clearCanvas<span style="font-family: Verdana, Arial, 宋体;">()</span>  
{  
    var c=document.getElementById("myCanvas");  
    var cxt=c.getContext("2d");  
    c.height=c.height;  
}  

2. 使用clearRect方法:

function clearCanvas()  
{  
    var c=document.getElementById("myCanvas");  
    var cxt=c.getContext("2d");  
    cxt.clearRect(0,0,c.width,c.height);  
}  

3. 类似于方法2,可以用某一特定颜色填充画布,从而达到清空的目的:

function clearCanvas()  
{  
    var c=document.getElementById("myCanvas");  
    var cxt=c.getContext("2d");  
      
    cxt.fillStyle="#000000";  
    cxt.beginPath();  
    cxt.fillRect(0,0,c.width,c.height);  
    cxt.closePath();  
}  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

回复

使用道具 举报

1

主题

2万

回帖

321

积分

中级会员

Rank: 3Rank: 3

积分
321
发表于 2022-8-8 15:10:52 | 显示全部楼层
这个源码不错啊
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2023-9-24 03:23:23 | 显示全部楼层
啊,数码撒飒飒飒飒
回复 支持 反对

使用道具 举报

1

主题

1万

回帖

51

积分

注册会员

Rank: 2

积分
51
发表于 2024-3-25 19:08:37 | 显示全部楼层
下载来瞧瞧
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

99

积分

注册会员

Rank: 2

积分
99
发表于 2024-5-20 08:25:17 | 显示全部楼层
哦哦哦ijhhsdj
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-7-5 21:29:20 | 显示全部楼层
谢谢您的分享!
回复 支持 反对

使用道具 举报

11

主题

1万

回帖

103

积分

注册会员

Rank: 2

积分
103
发表于 2024-8-7 05:04:26 | 显示全部楼层
为全额万千瓦
回复 支持 反对

使用道具 举报

13

主题

2万

回帖

85

积分

注册会员

Rank: 2

积分
85
发表于 2024-8-23 22:59:25 | 显示全部楼层
vcxvcxv
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

262

积分

中级会员

Rank: 3Rank: 3

积分
262
发表于 2024-9-16 17:50:14 | 显示全部楼层
sdsadsadsadf
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

120

积分

注册会员

Rank: 2

积分
120
发表于 2024-9-26 01:41:18 | 显示全部楼层
天天源码论坛
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2025-1-31 16:04 , Processed in 0.068201 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表