html5绘制矩形动画,HTML5下绘制矩形教程

绘制矩形

上一节，我们使用lineto()方法绘制一个封闭的矩形。其实，canvas的api提供了rect()方法可以绘制矩形。rect()方法是路径方法，它会把指定的矩形添加到当前路径的子路径中。它只添加路径，绘制图形还是由stroke()或fill()方法完成。

除了rect()方法之外，canvas 的api还提供了三个直接处理矩形的方法：

fillrect(x, y, width, height)

strokerect(x, y, width, height)

clearrect (x, y, width, height)

这三个方法用来处理以(x, y)为左上角、宽度为width、高度为height的矩形区域，它们直接用来处理画布上内容的，并且都不是路径方法，都不影响当前路径及路径中的当前点。

fillrect()方法填充矩形区域；strokerect()方法勾勒矩形边框；clearrect()方法清除矩形区域内的所有内容，并将它恢复到初始状态，即透明色。调用clearrect()方法时，可以把widht和height设置成跟画布相同的尺寸，用来清除整个画布上的内容。

以下代码将使用strokerect()方法来绘制左侧的矩形，使用fillrect ()方法绘制右侧的矩形，当用户点击“清除画布”按钮时，调用clearrect()方法清除整个画布的内容。代码如下：

清除画布

function drawrect() {

var canvas = document.getelementbyid("canvas");

var context = canvas.getcontext('2d');

var clearme = document.getelementbyid("clearme");

context.strokerect(50, 20, 120, 100);

context.fillrect(220, 20, 120, 100);

clearme.onclick = function() {

context.clearrect(0, 0, canvas.width, canvas.height);

}

运行结果如图 4‑6 所示：

图4-6 绘制矩形

html5绘制矩形动画,HTML5下绘制矩形教程相关推荐

html5绘制矩形动画,HTML5 Canvas中绘制矩形实例
本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, "The Basic Rectangle Shape". ...
html5遮罩层动画,HTML5+CSS3城市场景动画
最近一直在研究HTML5的动画表现,特别是在移动设备上的呈现.今天就为大家分享一个用HTML5+CSS3制作的城市场景动画,动画包含了白天到夜晚的渐变动画以及太阳.云朵.气球等动画效果:除此之外,页面 ...
html5点线动画,HTML5带音效的两点连线动画
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 (function() { var App = function() { this.el_svg = doc ...
html5中Canvas、绘制线条模糊、常见绘制工具、绘制基本图形、绘制图片、面向对象的方式绘制图形图片、绘制文本、帧动画绘制
Canvas容器: canvas标签用来定义图像的容器,必须配合脚本来绘制图像,canvas也运用于游戏开发.注意:canvas绘制图时会出现线条模糊情况,这是因为显示屏像素和canvas中定义的一个 ...
哈哈，又找到几个强大的html5+css3的动画效果
一周HTML5经典回顾 31个别出心裁的HTML5动画 40,425 人浏览发表回复 13 又是一周即将过去,我们来精心挑选这周分享的31款别出心裁的HTML5动画,很多还比较实用,一起来看看吧. ...
html5标签云,TagCanvas - HTML5 Canvas技术开发的标签云动画
TagCanvas 是一个基于HTML5Canvas技术开发的标签云动画.还提供一个以jQuery插件形式实现的版本.它支持文本和图片两种格式,能够以 Sphere, hcylinder 或 vcy ...
html5时钟代码菜鸟课程,html5绘制时钟动画
这篇文章主要介绍了html5绘制时钟动画,需要的朋友可以参考下复制代码代码如下: var clock=document.getElementById("clock"); var ...
HTML5: 利用SVG动画动态绘制文字轮廓边框线条
DEMO: 点击这里看效果简要教程这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效.SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单.精美的图标和文字.关于使用S ...
html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...

html5绘制矩形动画,HTML5下绘制矩形教程

html5绘制矩形动画,HTML5下绘制矩形教程相关推荐

最新文章

热门文章