html5 canvas清空画布方法(转)

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

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

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

2. 使用clearRect方法:

function clearCanvas()
{
    var cxt=document.getElementById("myCanvas").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();
}  

原文地址:https://blog.csdn.net/inuyasha1121/article/details/53925538

原文地址:https://www.cnblogs.com/historylyt/p/8868554.html

时间: 2024-11-09 16:29:12

html5 canvas清空画布方法(转)的相关文章

HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素

欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制图片 绘制文本 相关要求 环境要求:Google Chrome, Firefox, Safari, Opera, 或者 IE9以上的现代浏览器 编程要求:需要有基础的HTML和Javascript编程经验,相关的画布编程将调用Javascript API来处理 HTML Canvas基本元素 HTM

HTML5 canvas translate() 方法

实例 在位置 (10,10) 处绘制一个矩形,将新的 (0,0) 位置设置为 (70,70).再次绘制新的矩形(请注意现在矩形从位置 (80,80) 开始绘制): Your browser does not support the HTML5 canvas tag. JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillRect(10,10

HTML5 画布上的 Three.js 环境灯光(HTML5 Canvas Three.js Ambient Lighting)

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. HTML5 画布上的 Three.js 环境灯光HTML5 Canvas Three.js Ambient Lighting <!DOCTY

HTML5 | Canvas中变量作用域与setInterval()方法的影响

Demo - 随机绘制圆环 实现思路: 将一个圆环的绘制分成100份,setInterval()方法定义每隔时间n绘制一段新的,每份的开始路径都是上一次的结束路径,实现步进绘制. 通过Math.random(),随机生成圆的坐标半径颜色. 实现方法: 定义画布和联系 设置步进属性 设置随机圆属性(5个参数:x,y,半径,开始,结束,方向) 循环执行绘画 <<index.html>> <!DOCTYPE html> <html> <head> &l

HTML5 canvas 中的arcTo()方法的用法

除了arc()之外,Canvas的绘图环境对象还提供了另一个用于创建圆弧路径的方法,那就是arcTo().改方法接受了5个参数: arcTo(x1,x2,y1,y2,radius) arcTo()方法的参数分别代表两个点击圆形半径.该方法一指定的半径来绘制一条圆弧,此圆弧与当前点到第一个点(x1,y1)的连线相切,而且第一个点到第二点(x2,y2)的连线也相切.该方法的这些特性,使得它非常适合用了绘制矩形的原角. 使用arcTo()方法: html: <!Doctyp html> <ht

html5 canvas画布上合成

source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标图像内的源图像部分会显示,目标图像是透明的. source-out 在目标图像之外显示源图像.只会显示目标图像之外源图像部分,目标图像是透明的. destination-over 在源图像上方显示目标图像. destination-atop 在源图像顶部显示目标图像.源图像之外的目标图像部分不会被显

[转]html5 Canvas画图教程(5)—canvas里画曲线之arc方法

在canvas画线条这篇文章中,我讲了画直线的方法,按理这篇画曲线的文章早该发了,但由于canvas画曲线比较特殊,我还没摸透,所以要一步步尝试. canvas里画曲线的难点之一,就在于他连曲线的函数就有4个!分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简单的arc方法讲起吧. arc的作用是画一个正规的圆弧,可以是一个完整的圆,也可以是一个圆的某一段弧线. arc的语法如下: 代码如下: context.arc(x, y, radius, st

html5 canvas+js实现ps钢笔抠图

html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同事找到了canvans以比较核心的属性globalCompositeOperation = "destination-out", 属性可以实现通过由多个点构成的闭合区间设置成透明色穿透画布背景色或是背景图片,这样省了许多事. 2.实现效果: 鼠标点完之后会将所有的点连成闭合区间,并可自由拖

HTML5 canvas 在线画笔绘图工具(三)

组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之前我们来看一下程序的HTML代码. 画布由三个Canvas组成 toolbar用于绘制工具条,drawCanvas 用于画图的画布,openCanvas 用于在打开保存的图片时显示小图片. 通过建立一个新的TDrawBuilder对象 new TDrawBuilder(toolbar,drawcan