编程 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 相关文章推荐

浅析JQuery获取和设置Select选项的常用方法总结

Jul 04 Javascript

jQuery中not()方法用法实例

Jan 06 Javascript

Jquery获取第一个子元素简单实例

Jun 02 Javascript

BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面

Aug 01 Javascript

js如何编写简单的ajax方法库

Aug 02 Javascript

vue自定义过滤器创建和使用方法详解

Nov 06 Javascript

解决vue处理axios post请求传参的问题

Mar 05 Javascript

JS字符串与二进制的相互转化实例代码详解

Jun 28 Javascript

vue.js实现图书管理功能

Sep 24 Javascript

微信小程序开发（二）：页面跳转并传参操作示例

Jun 01 Javascript

浅谈vue单页面中有多个echarts图表时的公用代码写法

Jul 19 Javascript

Vue项目开发常见问题和解决方案总结

Sep 11 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四舍五入精确小数位及取整

2014/01/14 PHP

php ci框架中加载css和js文件失败的解决方法

2014/03/03 PHP

PHP实现用户登录的案例代码

2018/05/10 PHP

phpmyadmin在宝塔面板里进不去的解决方案

2020/07/06 PHP

点弹代码点击页面任何位置都可以弹出页面效果代码

2012/09/17 Javascript

5秒后跳转到另一个页面的js代码

2013/10/12 Javascript

js实现的标题栏新消息闪烁提示效果

2014/06/06 Javascript

jQuery判断浏览器并动态调整select宽度的方法

2016/03/02 Javascript

JS简单随机数生成方法

2016/09/05 Javascript

jQuery中的AjaxSubmit使用讲解

2016/09/25 Javascript

基于jQuery实现左侧菜单栏可折叠功能

2016/12/27 Javascript

canvas 绘制圆形时钟

2017/02/22 Javascript

通过命令行生成vue项目框架的方法

2017/07/12 Javascript

vuejs父子组件之间数据交互详解

2017/08/09 Javascript

详解如何优雅地在React项目中使用Redux

2017/12/28 Javascript

vue init webpack myproject构建项目 ip不能访问的解决方法

2018/03/20 Javascript

Python读写文件方法总结

2015/06/09 Python

python利用dir函数查看类中所有成员函数示例代码

2017/09/08 Python

Python从文件中读取指定的行以及在文件指定位置写入

2019/09/06 Python

python3.7环境下安装Anaconda的教程图解

2019/09/10 Python

如何在python中实现随机选择

2019/11/02 Python

python中count函数简单的实例讲解

2020/02/06 Python

Python OpenCV读取显示视频的方法示例

2020/02/20 Python

Python bytes string相互转换过程解析

2020/03/05 Python

Python OpenCV实现测量图片物体宽度

2020/05/27 Python

python openssl模块安装及用法

2020/12/06 Python

Ralph Lauren意大利官方网站：时尚界最负盛名的品牌之一

2018/10/18 全球购物

请解释接口的显式实现有什么意义

2012/05/26 面试题

DELPHI面试题研发笔试试卷

2015/11/08 面试题

2014年教师节国旗下讲话稿

2014/09/10 职场文书

医生个人自我剖析材料

2014/10/08 职场文书

《活见鬼》教学反思

2016/02/24 职场文书

使用 JavaScript 制作页面效果

2021/04/21 Javascript

德劲DE1108畅想

2021/04/22 无线电

通过shell脚本对mysql的增删改查及my.cnf的配置

2021/07/07 MySQL

Python实现为PDF去除水印的示例代码

2022/04/03 Python