js+canvas绘制矩形的方法


Posted in Javascript onJanuary 28, 2016

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

运行效果截图如下:

js+canvas绘制矩形的方法

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>canvas绘制矩形</title>
  <script type="text/javascript" >
  function draw(id) {
    var canvas = document.getElementById("canvas");
    if (canvas) {
      var context = canvas.getContext("2d");
      context.fillStyle = "#DDDDDD";
      context.fillRect(0, 0, 400, 400);
      context.strokeStyle = "black";
      context.fillStyle = "gray";
      context.lineWidth = 5;
      context.fillRect(0,0,200,300);
      context.strokeRect(0,0,200,200);
    } else {
     return;
    }
  }
  function drawBorder(id) {
    var canvas = document.getElementById("canvas2");
    if (canvas) {
      var context = canvas.getContext("2d");
      context.fillStyle = "red";
      context.strokeStyle = "black";
      context.lineWidth = 5;
      context.fillRect(0,0, 300, 200);      
      context.strokeRect(0,0,300,200);
    } else {
    return;
    }
  }
  window.onload = function () {
    draw("canvas");
    drawBorder("canvas2");
  }
  </script>
</head>
<body>
<canvas id="canvas" width="400" style="background:red;" height="400"></canvas>
<hr />
<canvas id="canvas2" width="400"  height="400"></canvas>
</body>
</html>

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

Javascript 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
JScript内置对象Array中元素的删除方法
Mar 08 Javascript
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
Javascript继承机制的设计思想分享
Aug 28 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
js+canvas简单绘制圆圈的方法
Jan 28 #Javascript
谈一谈javascript闭包
Jan 28 #Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 #Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 #Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 #Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 #Javascript
js+canvas绘制五角星的方法
Jan 28 #Javascript
You might like
Thinkphp关闭缓存的方法
2015/06/26 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
python连接mysql实例分享
2016/10/09 Python
python与C互相调用的方法详解
2017/07/14 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
python 如何上传包到pypi
2020/12/24 Python
Java程序开发中如何应用线程
2016/03/03 面试题
文秘自荐信
2013/10/20 职场文书
社会实践自我鉴定
2013/11/07 职场文书
求职意向书
2014/04/01 职场文书
经销商年会策划方案
2014/05/29 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
岳麓书院导游词
2015/02/03 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
会计专业自荐信范文
2019/05/22 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python
Python字符串格式化方式
2022/04/07 Python
如何利用python创作字符画
2022/06/25 Python