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 相关文章推荐
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
May 04 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
ES6学习教程之Promise用法详解
Nov 22 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
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
PHP动态输出JavaScript代码实例
2015/02/12 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
js使用递归解析xml
2014/12/12 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
Python写入CSV文件的方法
2015/07/08 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
python DataFrame 取差集实例
2019/01/30 Python
python实现处理mysql结果输出方式
2020/04/09 Python
基于python实现对文件进行切分行
2020/04/26 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
Python gevent协程切换实现详解
2020/09/14 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
美国家具网站:Cymax
2016/09/17 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
廉政教育心得体会
2014/01/01 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
年度考核个人总结
2015/03/06 职场文书
2015年大学生工作总结
2015/04/21 职场文书
销售合作意向书范本
2015/05/08 职场文书
队列队形口号
2015/12/25 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python