使用<canvas>元素，必须先设置其width和height属性，指定可以绘图的区域大小。

要在画布上绘图，需要取得绘图上下文，也就是要调用getContext()方法并传入上下文的名字。在使用<canvas>元素前，首先要检测下getContext()方法是否存在，不是所有的版本的浏览器都支持的。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>

        <script type="text/javascript">

            var drawing = document.getElementById("drawing");

            //确定浏览器支持<canvas>元素

            if(drawing.getContext) {

                var context = drawing.getContext("2d");

                //更多代码

            }

        </script>

    </body>

</html>

toDataURL()方法，可以导出canvas元素上绘制的图像，这个方法接受一个参数，即图像的MIME类型格式，而且适合用于创建图像的任何上下文。栗如：

var drawing = document.getElementById("drawing");

//确定浏览器支持canvas元素

if(drawing.getContext){

  var imgURI = drawing.toDataURL("image/png");

  //显示图像

  var image = document.createElement("img");

  image.src = imgURI;

  document.body.appendChild(image);

}

2D上下文的两周基本绘图操作是填充和描边。填充，就是用指定的样式（颜色、渐变或图像）填充图形，描边就是只在图形的边缘画线。这两个操作结果取决于两个属性：fillStyle和strokeStyle，这两个属性的值可以是字符串、渐变对象或模式对象，默认值都是“#000000”。

矩形是唯一一种可以直接在2D上下文中绘制的形状。与矩形相关的方法包括fillRect()、strokeRect()和clearRect()。这三个方法都能接收4个参数：矩形的x坐标，矩形的y坐标，矩形宽度和矩形高度，这些参数的单位都是像素。

通过fillRect()方法绘制矩形。举栗：

var drawing = document.getElementById("drawing");

            //确定浏览器支持<canvas>元素

if(drawing.getContext) {

   var context = drawing.getContext("2d");

   //绘制红色矩形

   context.fillStyle = "#ff0000";

   context.fillRect(10, 10, 50, 50);

   //绘制半透明的蓝色矩形

   context.fillStyle = "rgba(0,0,255,0.5)";

   context.fillRect(30, 30, 50, 50);

}

通过strokeRect()方法绘制矩形。举栗：

var drawing = document.getElementById("drawing");

//确定浏览器支持<canvas>元素

if (drawing.getContext){

    var context = drawing.getContext("2d");

    //绘制红色描边矩形

    context.strokeStyle = "#ff0000";

    context.strokeRect(10, 10, 50, 50);

    //绘制半透明的蓝色描边矩形

    context.strokeStyle = "rgba(0,0,255,0.5)";

    context.strokeRect(30, 30, 50, 50);

}

参考资料

《javascript高级程序设计(第3版)》第15章 使用Canvas 绘图

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 绘制矩形

    XXX(x,y,width,height)   x矩形左上角x坐标                                   y矩形左上角y坐标                       ...

  6. Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果

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

  7. html5 canvas绘制矩形和圆形

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

  8. vue下canvas绘制矩形

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

  9. 《DirectX 9.0 3D游戏开发编程基础》 第二章 绘制流水线 读书笔记

    模型的表示 场景:物品或模型的集合 任何物品都可以用三角形网络逼近表示.我们经常用以下术语描述三角形网络:多边形(polygons).图元(primitives).网络几何单元(mesh geomet ...

随机推荐

  1. [drf]model设置

    参考 //# 给model添加虚拟字段 class CeleryExampleResult(models.Model): task_id = models.BigIntegerField(defaul ...

  2. Java同步数据结构之LinkedBlockingQueue

    前言 比起ArrayBlockingQueue,LinkedBlockingQueue应该是最被大家常用的阻塞队列,LinkedBlockingQueue是基于链表的一种可选容量的阻塞队列,也就是说, ...

  3. Swift 自动引用计数（ARC）

    Swift 使用自动引用计数(ARC)这一机制来跟踪和管理应用程序的内存 通常情况下我们不需要去手动释放内存,因为 ARC 会在类的实例不再被使用时,自动释放其占用的内存. 但在有些时候我们还是需要在 ...

  4. JDBC的工具类

    A: 抽取两个方法,一个获取Connection对象,一个是释放资源 import java.io.FileReader; import java.sql.Connection; import jav ...

  5. linux高可用集群(HA)原理详解

    高可用集群 一.什么是高可用集群 高可用集群就是当某一个节点或服务器发生故障时,另一个节点能够自动且立即向外提供服务,即将有故障节点上的资源转移到另一个节点上去,这样另一个节点有了资源既可以向外提供服 ...

  6. 面向对象ALV选择列

    通过  gs_layout-box_fname  = 'SEL'.设置选择行,不能取到 SEL列的值 找资料:作者:f122300349 来源:CSDN 原文:https://blog.csdn.ne ...

  7. Salesforce LWC学习(九) Quick Action in LWC

    我们在lightning开发中,quick action是一个常用的功能,很可惜的是,lwc目前还不支持单独的custom quick action操作,只能嵌套在aura中使用才能发挥作用. 官方也 ...

  8. http://www.cda.cn/view/25735.html

    通过实例浅析Python对比C语言的编程思想差异 我一直使用 Python,用它处理各种数据科学项目. Python 以易用闻名.有编码经验者学习数天就能上手(或有效使用它). 听起来很不错,不过,如 ...

  9. 【计算机视觉】MTCNN的windows-cpu配置

    前言 MTCNN是级联卷积网络,原理基本上比较清晰,只是还缺少实战,看到一个CSDN上windows的实现过程,就拿来试试. 操作过程 参考here,某些步骤会添加博主遇到的问题的解释. 第一部分:c ...

  10. Android之FrameWork

    1 Activity的生命周期和启动模式 1.1 Activity的生命周期全面分析 用户正常使用情况下的生命周期 & 由于Activity被系统回收或者设备配置改变导致Activity被销毁 ...