html5 canvas 清除可以使用clearRect() 方法

clearRect() 方法的作用是清空给定矩形内的指定像素。
JavaScript 语法：
context.clearRect(x,y,width,height);

x 要清除的矩形左上角的 x 坐标
y 要清除的矩形左上角的 y 坐标
width 要清除的矩形的宽度，以像素计
height 要清除的矩形的高度，以像素计

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas_keleyi_com" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas_ke"+"leyi_com");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);

</script>

</body>
</html>

clearRect清除html5画布的更多相关文章

  1. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

  2. HTML5画布生成的3D飞船舰队效果

    在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果

  3. 使用HTML5画布（canvas）生成阴影效果

    来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...

  4. 设置清除html5页面缓存

    设置清除html5页面缓存 html5端设置 meta 标签: <meta http-equiv="Pragma" content="no-cache" ...

  5. HTML5 画布参考

    描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必 ...

  6. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  7. html5画布基础

    canvas 元素用于在网页上绘制图形. 什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canva ...

  8. html5画布的旋转效果

    keleyi.htm的代码如下: <!DOCTYPE HTML> <html> <head> <title>html旋转画布-柯乐义</title ...

  9. html5 画布上的rotate使用

    作为刚进公司的毕业生,第一个项目便是开发html5游戏,于是网上搜寻各种有关html5的资料,把w3School中有关html5的教程通通过了一遍,发现里面的教程非常适合刚接触html5的人,作为菜鸟 ...

随机推荐

  1. C++的静态联编和动态联编

    联编的概念 联编是指一个计算机程序自身彼此关联的过程,在这个联编过程中,需要确定程序中的操作调用(函数调用)与执行该操作(函数)的代码段之间的映射关系. 意思就是这个函数的实现有多种,联编就是把调用和 ...

  2. C# Azure 远程调试

    Azure上的配置 1. 登录我们自己的app,开启远程调试 [远程调试]—> 打开 [远程 Visual Studio 版本] –> 2017,看你是什么版本 这里有点需要注意的是,如果 ...

  3. c# 后台拼接分页Html

    public static string ReplaceStr(string originalStr, string oldStr, string newStr) { if (string.IsNul ...

  4. AJAX 实战【三级联动】分析

    使用 AJAX 对全国地名进行选取 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&quo ...

  5. CMD下进入MYSQL的命令

    CMD下进入MYSQL的命令 mysql -h localhost -u root -p 切到MYSQL的bin目录下,输入上面命令,回车 然后输入密码 回车

  6. (1)Microsoft office Word 2013版本操作入门_常用功能区

    word2013界面做了比较大的优化,刚开始用的时候不太习惯,研究了一下win10下word的新版本,记录以下几个功能小技巧: 1.常用功能区: 新打开一个word文档  文件.开始 .插入 等菜单称 ...

  7. 【Java并发编程】15、ReentrantLock实现原理深入探究

    原文已经写得非常详细了,直接把大神的文章转发过来了  https://www.cnblogs.com/xrq730/p/4979021.html 前言 这篇文章被归到Java基础分类中,其实真的一点都 ...

  8. 【Tomcat】性能优化

    一.JVM优化 1.内存优化. 2.垃圾回收策略优化. 二.server.xml的connector优化(connector是与HTTP请求处理相关的容器,三个容器的初始化顺序为:Server-> ...

  9. 从函数式编程到Promise

    译者按: 近年来,函数式语言的特性都被其它语言学过去了.JavaScript异步编程中大显神通的Promise,其实源自于函数式编程的Monad! 原文: Functional Computation ...

  10. 【代码笔记】Web-ionic-颜色

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...