XXX(x,y,width,height)   x矩形左上角x坐标
                                  y矩形左上角y坐标
                                  width 矩形宽度
                                  height 矩形高度

rect()                  创建矩形                                               和stroke()与fill()一起使用
fillRect()              绘制“被填充”的矩形                                和fillStyle属性一起使用,放在fillStyle属性后面
strokeRect()        绘制矩形(无填充)                                和strokeStyle属性一起使用,放在strokeStyle属性后面
clearRect()          在给定的矩形内清除指定的像素

    <canvas id="a" width="500" height="450" style="border:1px solid #000"></canvas>
<script type="text/javascript">
var a=document.getElementById("a");
var ctx=a.getContext("2d");
ctx.rect(20,20,150,100); //创建矩形
//ctx.stroke(); //绘制已定义的路径
ctx.fill(); //绘制当前绘图 ctx.fillStyle="red"; //设置或返回用于填充绘画的颜色、渐变或模式
ctx.fillRect(200,20,150,100); //绘制“被填充”的矩形 ctx.strokeStyle="blue"; //设置或返回用于笔触的颜色、渐变或模式
ctx.strokeRect(20,150,150,100); //绘制矩形(无填充) ctx.fillStyle="red"; //设置或返回用于填充绘画的颜色、渐变或模式
ctx.fillRect(200,150,150,100); //绘制“被填充”的矩形
ctx.clearRect(220,170,50,50); //在给定的矩形内清除指定的像素
</script>

canvas 绘制矩形的更多相关文章

  1. canvas绘制矩形

    canvas绘制矩形 方法 fillRect(x, y, width, height) 画一个实心的矩形 clearRect(x, y, width, height) 清除一块儿矩形区域 stroke ...

  2. h5学习-canvas绘制矩形、圆形、文字、动画

    绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  3. canvas 绘制 矩形 圆形

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <tit ...

  4. canvas 绘制矩形和圆形

    canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...

  5. Canvas 绘制矩形,圆形,不规则图形(线条),渐变等图像效果

    绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...

  6. html5 canvas绘制矩形和圆形

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. vue下canvas绘制矩形

    起因:根据项目需求本人写了一个绘制矩形的组件.功能:在图片中绘制矩形,根据图片大小进行自适应展示,获取图片矩形坐标.思路:首先定义一个固定大小的DIV,DIV标签中有监测鼠标变化的四个事件moused ...

  8. canvas绘制线和矩形

    ###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形: ----> ...

  9. HTML5—canvas绘制图形(1)

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

随机推荐

  1. mysql rr和rc区别

    <pre name="code" class="html">1. 数据库事务ACID特性 数据库事务的4个特性: 原子性(Atomic): 事务中的 ...

  2. CSDN总结的面试中的十大可视化工具

    1. D3.js 基于JavaScript的数据可视化库,允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中. 2. Data.js Data.js是一个JavaScript数据表示 ...

  3. 深入JS系列学习2

    今天看和学习了深入理解JS系列2.3.4.5,更加明白了函数声明和表达式的区别,自执行函数和立即执行函数,js强大的原型链继承,js中对象的想过写法,modules模式等. 在ECMAScript中, ...

  4. C++中的位域(bit-filed):一种节省空间的成员

    转载自:http://www.cppblog.com/suiaiguo/archive/2009/07/16/90211.html 有一种被称为位域(bit-field) 的特殊的类数据成员,它可以被 ...

  5. 关于C#泛型列表List<T>的基本用法总结

    //示例代码如下:using System;using System.Collections.Generic;using System.Collections.ObjectModel;namespac ...

  6. 一个C++的多态和虚函数实例

    类的说明: code: #include<iostream> #include<string> #define PAI 3.1415926 using namespace st ...

  7. 混血儿爹妈要混的远,数据库与WEB分离,得混的近

    最近搞了个漫画网站,放在香港VPS,由于内存不够,把数据库移到了阿里云,混的远了点,没缓存的时候网站打开速度慢了1秒左右.笨狗漫画:http://www.bengou8.com 底部有sql时间cop ...

  8. CComPtr用法

    COM接口指针很危险,因为使用过程中需要每一个使用者都要严格并且正确的AddRef和Release,一旦出现问题,就会造成对象不能被正常释放,或者对象被重复删除,造成程序崩溃.所以使用COM接口,必须 ...

  9. 高仿“点触验证码”做的一个静态Html例子

    先上源码: <html> <head> <title>TouClick - Designed By MrChu</title> <meta htt ...

  10. Android-语言设置流程分析

    Android手机语言切换行为,是通过设置-语言和输入法-语言来改变手机的语言,其实这个功能很少被用户使用.     以Android5.1工程源码为基础,从设置app入手来分析和学习语言切换的过程: ...