js中说明的上下文表示的意思为C++中作用域(个人理解),因此2D上下文说明的是这个2D的作用域

像素:用来描述图片清晰度的小矩阵

填充和描边

填充:context.fillStyle = "yellow";

描边:context.strokeStyle = "red";

如果单纯的使用这两个属性,不会再网页上面显示的。

var drawing = document.getElementById("drawing");
if(drawing.getContext)
{
  var context = drawing.getContext("2d");
  context.strokeStyle = "red";
  context.fillStyle = "yellow";
  context.fillRect(20,20,150,100)
  context.strokeRect(20,20,150,100)
  console.log(context)
}

2D上下文的更多相关文章

  1. 《JAVASCRIPT高级程序设计》Canvas绘图-2D上下文

    Canvas是HTML5添加的新元素,这个元素负责在页面中设定一个区域,然后通过JavaScript动态的在这个区域绘制图形.<canvas>由几组API组成,除了具备基本绘图能力的2D上 ...

  2. Javascript高级编程学习笔记(85)—— Canvas(2)2D上下文

    2D上下文 使用2D上下文提供的方法可以绘制简单的2D图形,如矩形,弧线和路径; 2D上下文的坐标开始域<canvas>元素的左上角,原点坐标为(0,0) 后续所有操作的计算都基于原点,x ...

  3. canvas之2D上下文

    1.填充和描边 (1)fillStyle (2)strokeStyle 2.绘制矩形 (1)fillRect() (2)strokeRect() (3)clearRect()   :清除画布上的矩形区 ...

  4. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

  5. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  6. 简介 jCanvas:当 jQuery遇上HTML5 Canvas

    https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...

  7. 初步了解Canvas

      <--------一些理论储备: ------------------------------------------------------------------------------ ...

  8. 使用canvas元素-art方法绘制圆弧

    最近在学习HTML5,发现canvas真的很棒,canvas元素是一种可供绘图的平面,我们用JavaScript对它进行配置和操作.我这里说一下arc方法绘制圆弧,顺便提一下涉及到的基础知识. 首先看 ...

  9. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

随机推荐

  1. Qt之QStackedWidget

    简述 QStackedWidget继承自QFrame. QStackedWidget类提供了多页面切换的布局,一次只能看到一个界面. QStackedWidget可用于创建类似于QTabWidget提 ...

  2. CAS-ERR Cannot create a session after the response has been committed

    现象: 当cas 登录人数较少时候没有错误,但是用户过多时候出现下列err May-2016 18:09:11.932 SEVERE [http-nio-8080-exec-52] org.apach ...

  3. Ubuntu 10.04 右上角网络管理图标消失的解决的方法

           那个显示网络状态的那个图标.叫做:network-manager.假设是有线网络连接的话.是上下两个箭头,假设是无线网络的话.是一个发射信号的形状. sudo gedit /etc/Ne ...

  4. 【LeetCode OJ 34】Search for a Range

    题目链接:https://leetcode.com/problems/search-for-a-range/ 题目:Given a sorted array of integers, find the ...

  5. 51nod-1189: 阶乘分数

    [传送门:51nod-1189] 简要题意: 给出一个数n,求出有多少个正整数x,y(0<x<=y)满足$1/n!=1/x+1/y$ 题解: 一开始还以为不可做 结果推一下柿子就会了 $1 ...

  6. Data Member Order

    https://docs.microsoft.com/en-us/dotnet/framework/wcf/feature-details/data-member-order In some appl ...

  7. ListView实现丰富的列表功能

    ListView实现丰富的列表功能 1.主布局activity_main.xml <?xml version="1.0" encoding="utf-8" ...

  8. 构造函数的理解(构造函数与 init 方法)

    0. 构造函数与 init 方法 构造方法内部禁止添加任何业务逻辑,如果有业务逻辑,请放在 init 方法中: 1. 构造函数的参数 以下为一个堆实现优先队列(堆的实现借助完全二叉树,而完全二叉树又可 ...

  9. AS3 常见问题

    SharedObject 不起作用(exe, air中) var so:SharedObject = SharedObject.getLocal("aa", "/&quo ...

  10. Windows下安装Scrapy方法及常见安装问题总结——Scrapy安装教程

    这几天,很多朋友在群里问Scrapy安装的问题,其实问题方面都差不多,今天小编给大家整理一下Scrapy的安装教程,希望日后其他的小伙伴在安装的时候不再六神无主,具体的教程如下. Scrapy是Pyt ...