1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <canvas id="canvas" style="margin:0 auto;">
  9.         The current browser does not support Canvas, can replace the browser a try!
  10.     </canvas>
  11.  
  12.     <script>
  13.  
  14.         // 绘制矩形
  15.         function drawRect(ctx,x,y,width,height,borderWidth,borderColor,fillColor){
  16.  
  17.             ctx.beginPath();
  18.             ctx.rect(x,y,width,height)  //直接绘制矩形
  19.             ctx.closePath();
  20.  
  21.             ctx.lineWidth = borderWidth;
  22.             ctx.strokeStyle = borderColor;
  23.             ctx.fillStyle = fillColor;
  24.  
  25.             ctx.fill();
  26.             ctx.stroke();
  27.  
  28.         }
  29.  
  30.         function drawRect2(ctx,x,y,width,height,borderWidth,borderColor,fillColor){
  31.  
  32.             ctx.lineWidth = borderWidth;
  33.             ctx.strokeStyle = borderColor;
  34.             ctx.fillStyle = fillColor;
  35.  
  36.             ctx.fillRect(x,y,width,height);
  37.             ctx.strokeRect(x,y,width,height);
  38.  
  39.         }
  40.  
  41.         window.onload = function(){
  42.             var canvas = document.getElementById('canvas');
  43.  
  44.             canvas.width = 1024;
  45.             canvas.height = 768;
  46.  
  47.             if(canvas.getContext('2d')){
  48.                 var context = canvas.getContext('2d');
  49.  
  50.                 drawRect(context,100,100,400,400,10,"blue","yellow")
  51.                 drawRect2(context,300,300,400,400,10,"red","rgba(0,255,0,0.8)") //后绘制的填充色图形会对前面的图形进行遮挡
  52.  
  53.             }else{
  54.                 alert('当前游览器不支持Canvas，请更换游览器后再试！');
  55.             }
  56.         }
  57.     </script>
  58. </body>
  59. </html>

canvas-2rect.html的更多相关文章

  1. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  2. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  3. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  4. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  5. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  6. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  9. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

  10. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

随机推荐

  1. spring redis @Cacheable注解使用部分错误及无效原因

    spring redis @Cacheable注解使用部分错误及无效原因 说明:     spring项目用到redis注解无效,解决问题中遇到一堆BUG,各种搜索,看了许多错误解决方案一一测试,对于 ...

  2. common-io 文件监听例子

    package com.junge.spring.demo.commonio; import org.apache.commons.io.monitor.FileAlterationListenerA ...

  3. Cordova - IOS浏览器里面数字被当做电话号码

    网页上有连续超过5个数字,ios浏览器就会当做手机号码,如果某行文字有颜色,那么这个连续的数字就没颜色,变黑色了. 解决方法:在html页面头部加入下面代码 <meta name="f ...

  4. 【微服务】.netCore eShopOnContainers 部署实践《二》

    Docker 专业术语介绍 优点:轻量级.可伸缩(灵活性).可靠性.可移植  Container image A package with all of the dependencies and in ...

  5. EasyUI 获取展开表中行数据

    var index = $('#dg').datagrid('getRowIndex', row); //为destory_user.php传递参数id var ids = $("#dg&q ...

  6. vue 组件发布记录

    好久没做独立的 vue 组件了,最近突然想把一个常用的 vue 组件打成一个 npm 包,方便使用.好久不用,发现已经忘记环境怎么搭建.翻看以前的组件,才慢慢回想起来,中间还出现些错误.在这记录下开发 ...

  7. 高效的 JavaScript

    避免使用 eval 或 Function 构造器 改写 eval 如果你需要函数,使用 function 不要使用 with 不要在要求性能的函数中使用 try-catch-finally 隔离 ev ...

  8. FTP上传心得

    最近出了一个问题就是在本地上传FTP没有一点问题 可是部署到服务器上.上传的时候总是false.解决办法 ftp.enterLocalPassiveMode();boolean storeFile = ...

  9. 课程四(Convolutional Neural Networks)，第四 周（Special applications: Face recognition & Neural style transfer） —— 3.Programming assignments：Face Recognition for the Happy House

    Face Recognition for the Happy House Welcome to the first assignment of week 4! Here you will build ...

  10. 根据PDF模板生成PDF文件(基于iTextSharp)

    根据PDF模板生成PDF文件,这里主要借助iTextSharp工具来完成.场景是这样的,假如要做一个电子协议,用过通过在线填写表单数据,然后系统根据用户填写的数据,生成电子档的协议.原理很简单,但是每 ...