`
邱好东
  • 浏览: 9627 次
社区版块
存档分类
最新评论

HTML5Canvas画布之清空画布

阅读更多

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Canvas练习</title>

<script type="text/javascript">

   function clearMap(){

      context.clearRect(0,0,300,200);

   }

</script>

</head>

 

<body>

  <canvas id="myCanvas" style="border:1px solid" width="300" height="150">

     您的浏览器不支持canvas元素,请更新或更换您的浏览器。

  </canvas>

  <script type="text/javascript">

     var c=document.getElementById("myCanvas");

var context=c.getContext("2d");

context.fillStyle="red";

context.beginPath();

context.arc(200,150,100,-Math.PI*1/6,-Math.PI*5/6,true);

context.stroke();

 

  </script><br>

  <input name="" type="button" value="清空画布" onClick="clearMap();">

</body>

</html>

 

分享到:
评论

相关推荐

    Android 自定义画布canvas 实现绘制和清空画布功能

    5. **清空画布** 清空画布通常意味着擦除当前视图中的所有绘制内容。在Android中,我们无法直接“清空”Canvas,但可以通过重新绘制背景色来达到类似的效果。在`onDraw()`方法中,先用背景色填充整个画布,然后再...

    html5清空画布方法(三种)

    本文将详细讲解三种清空HTML5 Canvas画布的方法。 1. **重置尺寸法** 这是最简单且最快速的清空Canvas画布的方法。当Canvas元素的高度或宽度被重新设置时,其内容会被自动清除。因此,我们可以利用这一特性来清空...

    基于HTML5 Canvas和jQuery 的画图工具的实现

    例如,`drawPath()`用于在鼠标移动时绘制线条,`clearCanvas()`用于清空画布。 4. **事件绑定**:使用jQuery的`.on()`方法绑定事件监听器。例如,`canvas.on('mousedown', startDrawing)`会在鼠标按下时开始绘制,`...

    Canvas画布彩色粒子发散特效.zip

    Canvas画布是HTML5引入的一种强大的图形绘制工具,允许开发者在网页上直接通过JavaScript进行2D图形的绘制。本资源“Canvas画布彩色粒子发散特效.zip”提供了一个基于Canvas的2D粒子发散动画效果,它展示了如何利用...

    Android 自定义画布 绘制 撤销 清空

    在Android开发中,自定义画布(Canvas)是创建复杂图形和交互式用户界面的关键工具。本文将深入探讨如何在Android应用中实现自定义画布的绘制、撤销和清空功能,以帮助开发者构建功能丰富的绘图应用。 一、自定义...

    开源的HTML5 Canvas画图插件 - Literally Canvas

    《开源的HTML5 Canvas画图插件 - Literally Canvas详解》 HTML5的Canvas元素为网页带来了强大的图形绘制能力,而Literally Canvas则是一个优秀的基于Canvas的开源画图插件,它提供了一套完整的画图工具,使得用户...

    HTML5 canvas绘制涂鸦画板.zip

    保存功能通常会将canvas画布的内容转换为Base64编码的图片URL,然后可以存储在本地或服务器上。加载功能则是反向过程,从Base64编码恢复图片,并将其绘制回canvas。 总的来说,这个HTML5 canvas涂鸦画板项目展示了...

    html5 canvas鼠标跟随线条动画特效

    HTML5 Canvas是一个强大的Web绘图工具,允许开发者在网页上直接进行图形绘制,提供丰富的API接口,使得动态和交互式的视觉效果得以实现。本案例中,“html5 canvas鼠标跟随线条动画特效”是一个利用Canvas API创建的...

    html5 canvas简单的网页签名画板代码

    5. **清空画布** 使用`clearRect()`方法可以清除画布的一部分或全部,例如: ```javascript ctx.clearRect(0, 0, canvas.width, canvas.height); ``` 6. **扩展画布** 要扩展画布,需要先保存当前画布状态,...

    html5画布 涂鸦 上传

    HTML5 Canvas是HTML5标准中的一个关键特性,它允许开发者在网页上进行动态图形绘制,类似于在数字画布上绘画。Canvas元素通过JavaScript API提供了一系列方法,如`fillRect()`、`strokeRect()`、`beginPath()`等,...

    HTML5 Canvas鼠标绘制线条特效.zip

    这个“HTML5 Canvas鼠标绘制线条特效”利用了Canvas API,通过JavaScript实现了一个独特的效果,即当用户移动鼠标时,会在Canvas画布上绘制出跟随鼠标的线条,形成一种光标动画效果。下面我们将深入探讨这一技术的...

    html5 canvas绘制随机游动线条动画特效

    5. **清除画布**:在每次重绘前,使用`context.clearRect(0, 0, canvas.width, canvas.height)`清空画布,以确保新一帧的动画效果不会受到上一帧的影响。 6. **颜色与样式**:可以通过`context.strokeStyle`设置...

    清除canvas画布内容(点擦除+线擦除)

    在HTML5中,Canvas元素提供了一个强大的绘图接口,允许开发者动态绘制图形、文字和图像。当需要清除Canvas画布内容时,有两种主要方法:重置宽或高以及使用`clearRect`方法。 1. 重置宽或高 这种方法简单直接,...

    html5 canvas全屏的星空背景动画特效

    在`animate()`函数中,我们首先清空画布,然后遍历每个星星,更新它们的位置,并绘制到Canvas上。星星的垂直速度是随机的,这样可以模拟出星星闪烁的效果。当星星超出画布底部时,我们将其重置到顶部,形成一种无尽...

    html5 canvas在线签名板代码

    在HTML文件中,通常会有一个canvas元素,它是Canvas画布,所有图形的绘制都在这个画布上进行。 2. **doc.html**: 这可能是文档或者示例页面,用于解释代码的使用方法和功能特性,帮助开发者理解和应用这个签名板。 ...

    html5 canvas简洁的涂鸦画板代码

    4. **清空画板**:提供一个清空画板的按钮,调用`context.clearRect(0, 0, canvas.width, canvas.height)`可以清除整个画布。 5. **保存和加载画作**:HTML5提供了`canvas.toDataURL()`方法,可以将画布的内容转换...

    HTML5 Canvas粒子火焰动画特效

    使用`clearRect()`方法清空画布,然后遍历粒子数组,对每个粒子执行以下步骤: - 根据粒子的速度更新位置。 - 使用`fillStyle`设置粒子的颜色,通常是暖色调,如红色、橙色或黄色。 - 使用`beginPath()`、`moveTo...

    HTML5 Canvas 动画时钟

    HTML5 Canvas 是一种在网页上绘制图形的API,它允许开发者直接在浏览器中进行动态图形渲染,无需依赖任何插件。在这个"HTML5 Canvas 动画时钟"的主题中,我们将深入探讨如何利用Canvas API创建一个实时更新的、美观...

    HTML5 Canvas API 教程

    接着,通过改变 `&lt;canvas&gt;` 的宽度属性来清空画布,并再次绘制了一个矩形。最后,再次改变宽度属性来清空画布,并绘制第三个矩形。 #### 五、总结 HTML5 Canvas API 是一个非常强大且灵活的工具,允许开发者在网页...

Global site tag (gtag.js) - Google Analytics