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之表单布局(QFormLayout)

    简述 QFormLayout管理输入型控件和关联的标签组成的那些Form表单. QFormLayout是一个方便的布局类,其中的控件以两列的形式被布局在表单中.左列包括标签,右列包含输入控件,例如:Q ...

  2. ACM数学知识体系

    在盛情收到学弟邀请给他们整理ACM数学方面的知识体系,作为学长非常认真的弄了好久,希望各学弟不辜负学长厚爱!!!非常抱歉因为电脑全盘格式化好多word.PPT都丢失,我尽量具体地给大家找到各知识点学习 ...

  3. 后缀自己主动机(SAM)学习指南

    *在学习后缀自己主动机之前须要熟练掌握WA自己主动机.RE自己主动机与TLE自己主动机* 什么是后缀自己主动机 后缀自己主动机 Suffix Automaton (SAM) 是一个用 O(n) 的复杂 ...

  4. bzoj1433: [ZJOI2009]假期的宿舍(最大二分图匹配)

    1433: [ZJOI2009]假期的宿舍 题目:传送门 题解: 这题有点水 跑个二分图匹配就完事了(注意在校生不是一定都互相认识) 代码: #include<cstdio> #inclu ...

  5. 转一篇100offer的采访~35岁程序员是一种什么状态

    随着互联网的高速发展变革,大龄恐惧症越来越多地在技术圈被人讨论.很多程序员在工作5-10年以后,都会开始思考5年.10年甚至更久以后的自己,会是怎样一种生活工作状态,以及是否会被时代抛弃. 特别是全民 ...

  6. mybatis如何成功插入后获取自增长的id

    使用mybatis向数据库中插入一条记录,如何获取成功插入记录的自增长id呢? 需要向xml配置中加上一下两个配置: <insert id="add" useGenerate ...

  7. 《剑指offer》矩形覆盖

    一.题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 二.输入描述 输入n 三.输出描述 输出有多少种不同的覆 ...

  8. js封装each函数

    function each(ele,callback){ if(Object.prototype.toString.call(ele) == "[object Array]"){ ...

  9. 联想服务器thinkserver TS550 Raid5制作及winserver2012R2 安装过来

    一. 联想服务器thinkserver TS550 Raid5制作 1.开机后按ctrl+i  进入raid配置模式 2.选择“1”配置所需Raid模式(这次配的是raid5) 3.按提示确认后退出 ...

  10. php八大设计模式之装饰器模式

    我们都知道,得到一匹布需要大概这么几步: 1.染色 2.印花 3.裁剪 这种形式在面向对象中怎么实现呢? 面向过程[继承模式]实现: 继承模式得到需要的布料,一步一步的加工. 继承的层次越来越深,扩展 ...