1、2D上下文

1)填充与描边

填充和描边的两个操作取决于两个属性:fillStyle和strokeStyle。两个属性的值可以是字符串、渐变对象或模式对象,默认值都是#000000

例:

html:

<canvas id="drawing" width="200" height="200"></canvas>

js:

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

    if(drawing.getContext){//确定浏览器支持canvas元素
        var context = drawing.getContext("2d");
        context.strokeStyle = "red";
        context.fillStyle = "#0000ff";
    }

2)绘制矩形

与矩形有关的方法包括fillRect()、strokeRect()、clearRect()。这三个方法都接收4个参数:矩形的x坐标、矩形的y坐标、矩形的宽度和矩形的高度。单位都是像素。

首先,fillReat()方法在画布上绘制的矩形会填充指定的颜色,填充的颜色通过fillStyle属性指定,例:

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

    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()方法在画布上绘制的矩形会使用指定的颜色描边。描边的颜色通过strokeStyle属性指定。

clearRect()方法用于清除画布上的矩形区域。

3)绘制路径

要绘制路径,首先必须调用beginPath()方法,表示要开始绘制新路径。然后,再通过调用下列方法来实际地绘制路径。

1.arc(x,y,radius,startAngle,endAngle,counterclockwise):以(x,y)为圆心绘制一条弧线,弧线半径为radius,起始和结束(用弧度表示)分别为startAngle和endAngle。最后一个参数表示startAngle和endAngle是否按逆时针方向计算,值为false表示按顺时针方向计算。

2.arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线,到(x2,y2)为止,并且以给定的radius穿过(x1,y1)。

3.bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线,到(x,y)为止,并且以(c1x,c1y)和(c2x,c2y)为控制点。

4.lineTo(x,y):从上一点开始绘制一条直线,到(x,y)为止。

5.moveTo(x,y):将绘图游标移动到(x,y),不画线。

6.quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线,到(x,y)为止,并且以(cx,cy)为控制点。

7.rect(x,y,width,height):从点(x,y)开始绘制一个矩形,分别指定宽和高,这个方法绘制的是矩形路径,而不是strokeRect()和fillRect()所绘制的独立的形状。

创建完路径后,接下来有几种可能的选择:

如果想绘制一条连接到路径起点的线条,可以调用closePath()。如果路径已经完成,想用fillStyle填充它,可以调用fill()方法,还可以调用stroke()方法对路径描边,描边使用的是strokeStyle。最后还可以调用clip(),这个方法可以在路径上创建一个剪切区域。

例:绘制一个不带数字的始终表盘。

var drawing = document.getElementById("drawing");
    if(drawing.getContext){
    var context = drawing.getContext("2d");

        //开始路径
        context.beginPath();
        //绘制外圆
        context.arc(100,100,99,0,2 * Math.PI,false);
        //绘制内圆
        context.moveTo(194,100);
        context.arc(100,100,94,0,2 * Math.PI,false);
        //绘制分针
        context.moveTo(100,100);
        context.lineTo(100,15);
        //绘制时针
        context.moveTo(100,100);
        context.lineTo(35,100);
        //描边路径
        context.stroke();

还有一个isPointInPath()的方法。这个方法接收x和y坐标作为参数,用于在路径被关闭之前确定画布上的某一点是否位于路径上。例如:

if(context.isPointInPath(100,100)){
            alert("Point(100,100) is in the path");
        }

4)绘制文本

绘制文本有两个方法:fillText()和strokeText()。都接收4个参数:要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度。而且都以下列3个属性为基础:

1.font:表示文本样式、大小及字体

2.textAlign:表示文本对齐方式

3.textBaseline:表示文本的基线

例:在上面创建的表盘上绘制数字12

context.font = "bold 14px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillText("12",100,20);

 5)变换

1.rotate(angle)

2.scale(scalex,scaley)

3.translate(x,y)

4.transform(m1_1,m1_2,m2_1,m2_2,dx,dy)

5.setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy)

6)绘制图像

drawImage()

7)阴影

1.shadowColor

2.shadowOffsetX

3.shadowOffsetY

4.shadowBlur

8)渐变

createLinearGradient()

9)模式

createPattern()

10)使用图像数据

getImageDate()

11)合成

globalAlpha和globalCompositionOperation

JavaScript高级程序设计---学习笔记(五)的更多相关文章

  1. JavaScript高级程序设计---学习笔记(一)

    今天,2017.3.17开始利用课余时间仔细学习<JavaScript高级程序设计>,将需要掌握的知识点记录下来,争取把书里的所有代码敲一遍并掌握. 1.标识符命名最好是第一个字母小写,剩 ...

  2. javascript高级程序设计学习笔记

    javascript高级程序设计,当枕头书已经好久了~zz  现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...

  3. JavaScript高级程序设计学习笔记第五章--引用类型(函数部分)

    四.Function类型: 1.函数定义的方法: 函数声明:function sum (num1, num2) {return num1 + num2;} 函数表达式:var sum = functi ...

  4. JavaScript高级程序设计学习笔记第五章--引用类型

    一.object类型 1.创建object类型的两种方式: 第一种,使用构造函数 var person = new Object();或者是var person={};/与new Object()等价 ...

  5. JavaScript高级程序设计学习笔记第十五章--使用Canvas绘图

    一.基本用法 1.要使用<canvas>元素,必须先设置其 width 和 height 属性,指定可以绘图的区域大小.能通过 CSS 为该元素添加样式,如果不添加任何样式或者不绘制任何图 ...

  6. javascript 高级程序设计 学习笔记

    <!--<script> // 异步请求封装 IE6即以上浏览器 // ajax(url,fnSucc,selectID,fnFaild) //url 请求地址 //fnSucc 异 ...

  7. JavaScript高级程序设计---学习笔记(二)

    面向对象程序设计1.属性类型.定义多属性.读取属性特性对象的属性在创建时都带有一些特征值,JavaScript通过这些特征值来定义它们的行为.这些特性是为了实现JavaScript引擎用的,因此不能直 ...

  8. JavaScript高级程序设计学习笔记--面向对象的程序设计(二)-- 继承

    相关文章: 面向对象的程序设计(一) — 创建对象 http://www.cnblogs.com/blackwood/archive/2013/04/24/3039523.html 继承 继承是OO语 ...

  9. JavaScript高级程序设计学习笔记第三章--基本概念

    一.标识符: 1.区分大小写 2.命名规则: 第一个字符必须是一个字母.下划线(_)或一个美元符号($) 其他字符可以是字母.下划线.美元符号或数字 标识符中的字母也可以包含扩展的 ASCII 或 U ...

随机推荐

  1. Oracle Jdbc驱动下载及安装本地maven仓库

    由于二进制许可 binary license的限制,oracle jdbc驱动不能通过共有仓库来获取,所以你可以下载下来添加到自己的本地仓库或私有仓库中. 添加到本地仓库步骤如下: 下载Oracle ...

  2. MegaCli 安装过程

    首先说下自己遇到的坑: 百度搜索了一篇关于安装 MegaCli 的文章,于是乎就开始安装,装完之后获取不到 raid 的信息,后来发现是版本问题,就又搜索了一堆文章,最后搞定了 [root@web-0 ...

  3. js实现浏览器添加收藏功能

    今天搞项目的时候为了实现浏览者实现添加收藏的功能,特地了解了一下相关的API. 也看到了网上各种版本的代码.整理了一下,代码如下.简单易懂. <script> function _addF ...

  4. 每天一个Linux命令 7

    常用yum命令1)查询 yum list #查询所有可用软件包列表yum search 关键字 #搜索服务器上所有和关键字相关的包2)安装 yum -y install 包名选项: install 安 ...

  5. 3298: [USACO 2011Open]cow checkers

    3298: [USACO 2011Open]cow checkers Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 65  Solved: 26[Su ...

  6. RobotFramework中解析中文报错UnicodeDecodeError

    在RobotFramework中解析一段包含中文的字符串时遇到下面的报错: FAIL : UnicodeDecodeError: 'ascii' codec can't decode byte 0xe ...

  7. 《Machine Learning》系列学习笔记之第四周

    第四周 Model Representation I 让我们来看看如何使用神经网络来表示假设函数.在非常简单的水平上,神经元基本上是将输入(树突)作为输入到输出(轴突)的电输入(称为"尖峰& ...

  8. Spring-Mybatis配置多数据源

    可以参考: http://www.cnblogs.com/ityouknow/p/6102399.html 需要一个DatabaseConfiguration类,实现 TransactionManag ...

  9. cuda编程学习1——hello world!

    将c程序最简单的hello world用cuda编写在GPU上执行,以下为代码: #include<iostream>using namespace std;__global__ void ...

  10. iOS开发之状态栏

    从iOS7开始,状态栏默认情况下归控制器管理,比如状态栏的样式.状态栏的是否可见 控制器通过重写以下方法来控制状态栏 设置状态栏的样式,只需重写下列方法即可: - (UIStatusBarStyle) ...