编程 Javascript

js+html5实现canvas绘制简单矩形的方法

Posted in Javascript onJune 05, 2015

本文实例讲述了js+html5实现canvas绘制简单矩形的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>

希望本文所述对大家的web程序设计有所帮助。

- Author -

不吃皮蛋

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js函数般调用正则

Apr 08 Javascript

JavaScript Eval 函数使用

Mar 23 Javascript

修改好的jquery滚动字幕效果实现代码

Jun 22 Javascript

关于javascript中的typeof和instanceof介绍

Dec 04 Javascript

jQuery图片滚动图片的效果(另类实现)

Jun 02 Javascript

jquery 倒计时效果实现秒杀思路

Sep 11 Javascript

浅析jQuery中使用$所引发的问题

May 29 Javascript

深入理解ECMAScript的几个关键语句

Jun 01 Javascript

教你5分钟学会用requirejs(必看篇)

Jul 25 Javascript

Angular2 http jsonp的实例详解

Aug 31 Javascript

分析javascript中9 个常见错误阻碍你进步

Sep 18 Javascript

Vue数字输入框组件示例代码详解

Jan 15 Javascript

js+html5实现canvas绘制镂空字体文本的方法

Jun 05 #Javascript

js+html5通过canvas指定开始和结束点绘制线条的方法

Jun 05 #Javascript

js+HTML5实现canvas多种颜色渐变效果的方法

Jun 05 #Javascript

JavaSacript中charCodeAt()方法的使用详解

Jun 05 #Javascript

JavaScript中length属性的使用方法

Jun 05 #Javascript

jQuery插件bgStretcher.js实现全屏背景特效

Jun 05 #Javascript

js+html5绘制图片到canvas的方法

Jun 05 #Javascript

You might like

php错误提示failed to open stream: HTTP request failed!的完美解决方法

2011/06/06 PHP

PHP 读取和编写 XML

2014/11/19 PHP

Symfony查询方法实例小结

2017/06/28 PHP

JS代码放在head和body中的区别分析

2011/12/01 Javascript

JavaScript通过select动态更换图片的方法

2015/03/23 Javascript

对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解

2016/04/11 Javascript

JavaScript 字符串数字左补位，右补位，取固定长度，截位扩展函数代码

2017/03/25 Javascript

微信小程序实现刷脸登录

2018/05/25 Javascript

基于Vue+element-ui 的Table二次封装的实现

2018/07/20 Javascript

详解axios中封装使用、拦截特定请求、判断所有请求加载完毕）

2019/04/09 Javascript

vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解

2019/10/15 Javascript

Vue两个版本的区别和使用方法(更深层次了解)

2020/02/16 Javascript

javascript实现简易数码时钟

2020/03/30 Javascript

基于vue实现微博三方登录流程解析

2020/11/04 Javascript

vue使用过滤器格式化日期

2021/01/20 Vue.js

Node使用koa2实现一个简单JWT鉴权的方法

2021/01/26 Javascript

[02:46]2014DOTA2国际邀请赛选手为你解读比赛MVP充满梦想

2014/07/09 DOTA

python读写二进制文件的方法

2015/05/09 Python

pygame实现俄罗斯方块游戏

2018/06/26 Python

pandas读取csv文件,分隔符参数sep的实例

2018/12/12 Python

python sklearn库实现简单逻辑回归的实例代码

2019/07/01 Python

Python动态强类型解释型语言原理解析

2020/03/25 Python

python如何遍历指定路径下所有文件（按按照时间区间检索）

2020/09/14 Python

如何在Python3中使用telnetlib模块连接网络设备

2020/09/21 Python

10分钟理解CSS3 Grid布局

2018/12/20 HTML / CSS

英国领先的露营和露营车品牌之一：OLPRO

2019/08/06 全球购物

软件测试工程师笔试题带答案

2015/03/27 面试题

创业融资计划书

2014/04/25 职场文书

工作岗位说明书模板

2014/05/09 职场文书

和谐家庭演讲稿

2014/05/24 职场文书

2015年司机年终工作总结

2015/05/14 职场文书

新党员入党决心书

2015/09/22 职场文书

python实现Thrift服务端的方法

2021/04/20 Python

MySQL 覆盖索引的优点

2021/05/19 MySQL

Django实现WebSocket在线聊天室功能(channels库)

2021/09/25 Python

JavaScript中document.activeELement焦点元素介绍

2021/11/27 Javascript