语法

context.fillRect(x, y, width, height);

参数

x - ^Number - 矩形左上角x坐标
y - ^Number - 矩形左上角y坐标
width - ^Number - 绘画的矩形width宽度
height - ^Number - 绘画的矩形height宽度

例子

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>.place {border: 1px dotted black;width: 500px;height: 500px;}</style><script>function beginRect(id) {var canvas = document.getElementById('canvas');if (canvas == null) {return false;}var context = canvas.getContext('2d');var x = 0, y = 0;var pos;context.fillRect(x, y, 20, 20);var moveRect = function() {context.clearRect(0, 0, 500, 500);if (x == 0 && y == 0) {pos = 1;}if (x >= 480 && y == 0) {pos = 2;} if (x >= 480 && y >= 480) {pos = 3;} if (x == 0 && y >= 480) {pos = 4;}if (pos == 1) {x += 5;} else if (pos == 2) {y += 5;} else if (pos == 3) {x -= 5;} else if (pos == 4) {y -= 5;}context.fillRect(x, y, 20, 20);}setInterval(function() {moveRect();}, 30);}</script></head><body onload="beginRect()"><div class="place"><canvas id="canvas" width="500px" height="500px"></canvas></div></body>
</html>

效果

南无阿弥陀佛，祝你新年吉祥！

Canvas-2d fillRect相关推荐

记一次微信小程序canvas 2d 生成海报问题
因项目需要,需要制作海报分享. 如: 事情总是不是那么顺利,canvas生成海报生成中遇到各种奇葩问题.一开始是 wx.canvasToTempFilePath 中获取不到canvas对象,调用返回 ...
赠书：HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
小程序canvas 2d 绘图无法drawImage图片？
小程序canvas 2d 绘图无法drawImage图片? 微信iOS 7.0.20 版本使用canvas 2d 绘制drawImage时无法成功绘制,图片不显示,img1.onload不执行,执行 ...
基于canvas 2D实现微信小程序自定义组件-环形进度条
基于canvas 2D实现微信小程序自定义组件-环形进度条最近开发一个小程序项目博闻金榜答题小程序,需要使用到一个可以显示答题倒计时的组件,基于进度条实现,下面就主要介绍基于canvas2D实现一个 ...
丝滑流畅的手写签名 canvas 2d
在最近的小程序项目中,设计师又给我出难题了,需要在小程序里面实现一个手写签名功能,完成后将签名生成文件,上传的服务端去.手写签名不难,难在居然要我生成 svg,还有将签名功能搞得和画板一样,我是不能忍 ...
html5 lob,GitHub - LobbL/cax: HTML5 Canvas 2D Rendering Engine - 小程序、小游戏以及 Web 通用 Canvas 渲染引擎...
English | 简体中文 Cax HTML5 Canvas 2D Rendering Engine Features Simple API, Lightweight and High perfor ...
html5 2d小游戏,GitHub - pepsin/cax: HTML5 Canvas 2D Rendering Engine - 小程序、小游戏以及 Web 通用 Canvas 渲染引擎...
English | 简体中文 Cax HTML5 Canvas 2D Rendering Engine Features Simple API, Lightweight and High perfor ...
微信小程序使用html2canvas,微信小程序canvas 2d 引入本地图片并生成分享图
在小程序基础库 v2.9.0 正式开放一套全新的 Canvas 接口.该接口符合 HTML Canvas 2D 的标准,实现上采用 GPU 硬件加速,渲染性能相比于现有的 Canvas 接口有一倍左右 ...
小程序 canvas 2d 绘制图片并保存
获取canvas实例,使用的官方的代码.用一个变量canvas保存实例,后续保存时会调用. data () {return {canvas: null // 实例} }, onReady() {con ...
微信小程序引入echarts过大最佳解决方案、echarts在微信开发者工具中不跟随滑动、使用echarts控制台提示使用canvas 2d
一.微信小程序引入echarts过大最佳解决方案微信上传时代码包大小限制为2MB,但是当我们引入echarts以后,单echarts代码包已经973KB,因此再结合额外的业务代码以及其他资源很有可能 ...

Canvas-2d fillRect

语法

参数

例子

效果

Canvas-2d fillRect相关推荐

最新文章

热门文章