<canvas>标签

在网页中使用canvas元素,像使用其他HTML标签一样简单,然后利用JavaScript脚本调用绘图API,绘制各种图形。canvas拥有多种绘制路径、矩形、圆形、字符及添加图形的方法。

  利用<canvas>标签绘图基本流程

1、获取canvas对象

2、创建二维的绘图上下文对象

3、在canvas上绘制文字

链接:

https://cruxf.github.io/canvas1/text.html

  绘制基本的图形

绘制直线:

moveTo()方法用于创建新的子路径,并设置其起始点。lineTo()方法则设置了直线路径的终点;而stroke()方法用于沿该路径绘制一条直线,如:

 绘制矩形

绘图API为绘制矩形提供了两个专用的方法:strokeRect()和fillRect(),可分别用于绘制矩形边框和填充矩形区域。在绘制之前,往往需要先设置样式,然后才能进行绘制。其中,strokeStyle可设置矩形边框颜色,fillStyle可设置填充颜色,lineWidth可设置边框宽度。

链接:

https://cruxf.github.io/canvas1/squares.html

 绘制圆形

在canvas中,所有基本图形都是以路径为基础的,通常会调用linTo()、rect()和arc()等方法设置一些路径。在最后使用fill()或stroke()方法进行绘制边框或填充区域时,都是参照这个路径来进行的。使用路径绘图基本分为如下3个步骤:

1、创建绘图路径。常用到beginPath()和closePath()方法,每次调用beginPath()方法都会产生一个新的子路径。

2、设置绘图样式。使用strokeStyle属性设置边框颜色;使用lineWidth属性设置边框宽度;使用fllStyle属性设置填充颜色。

3、绘制图形。stroke()方法绘制边框;fill()方法绘制填充区域。

链接:

https://cruxf.github.io/canvas1/circular.html

绘制三角形

绘制三角形同样需要通过绘制路径的方法来实现,基本步骤与绘制圆形差不多,如:

closePath()方法习惯性地放在路径设置的最后一步,不要认为是路径设置的结束,因为在此之后,还可以继续设置路径。

链接:

https://cruxf.github.io/canvas1/triangle.html

图形组合

在canvas绘图中,可以通过globalCompositeOperation属性来设置如何在两个图形叠加的情况下组合颜色,用法如下:

参数value的合法值有12个,决定了12种图形组合的类型,默认值是source-over。12种组合类型如下:

1、copy:只绘制新图形,删除其他所有内容。

2、darker:在图形重叠的地方,颜色由两个颜色值相减后决定。

3、destination-atop:已有的内容只在它和新的图形重叠的地方保留,新图形绘制于内容之后。

4、destination-in:在新图形以及已有画布重叠的地方,已有内容都保留,所有其他内容成为透明的。

5、destination-out:在已有内容和新图形不重叠的地方,已有内容保留,所有其他内容成为透明的。

6、destination-over:新图形绘制于已有内容的后面。

7、lighter:在图形重叠的地方,颜色由两种颜色值的加值来决定。

8、source-atop:只有在新图形和已有内容重叠的地方,才绘制新图形。

9、source-in:只有在新图形和已有内容重叠的地方,新图形才绘制,所有其他内容成为透明的。

10、source-out:只有在和已有图形不重叠的地方,才绘制新图形。

11、source-over:新图形绘制于已有图形的顶部,这是默认行为。

12、xor:在重叠和正常绘制的其他地方,图形都成为透明的。

函数RectArc(context)是用来绘制组合图形的,使用方法translate()移动到不同的位置。

链接:

https://cruxf.github.io/canvas1/combinedgraph.html

绘制曲线

在canvas中,绘图API提供了多种曲线的绘制方法,主要的曲线绘制方法有arc()、arcTo()、quardraticCurveTo()和bezierCureveTo()。

使用arc()方法,如:

假如在绘制圆弧的时候用closePath()闭合绘制路径,那么就会生成一个半圆。

链接:

https://cruxf.github.io/canvas1/curve1.html

使用arcTo()方法:

arcTo()方法使使用切线的方法绘制弧线,使用两个目标点和一个半径,为当前的子路径添加一条弧线。与arc()方法相比,同样是绘制弧线,绘制思路和侧重点不同。

链接:

https://cruxf.github.io/canvas1/curve2.html

使用quadraticCurveTo()方法:

二次样条曲线是曲线的一种,canvas绘图API专门提供了此曲线的绘制方法。quadraticCurveTo()方法为当前的子路径添加一条二次样条曲线。

链接:

https://cruxf.github.io/canvas1/curve3.html

使用bezierCurveTo()方法:

贝塞尔曲线是应用于二维图形应用程序中的数学曲线。与二次样条曲线相比,贝塞尔曲线使用了两个控制点,从而可以创建更复杂的曲线图形。

链接:

https://cruxf.github.io/canvas1/curve4.html

绘制文本

通过<canvas>标签,可以使用填充的方法绘制文本,也可以使用描边的方法绘制文本,在绘制文本之前,还可以设置文字的字体样式和对齐方式。绘制文本有两种方法,即填充绘制方法fillText()和描边绘制方法strokeText(),如:

有些时候,开发人员需要知道所绘制的文本宽度,以方便进行布局。绘图API挺了获取绘制文本宽度的方法,measureText()方法就是用来获取文本的宽度。

链接:

https://cruxf.github.io/canvas1/text1.html

创建对象阴影:

链接:

https://cruxf.github.io/canvas1/text2.html

 绘制线性渐变:

使用渐变需要三个步骤:首先是创建渐变对象;其次是设置渐变颜色和过渡方式;最后将渐变对象赋值给填充样式或描边样式。

线性渐变是指起始点和结束点之间线性的内插颜色值,设置渐变颜色需要在渐变对象上使用addColorStop()方法,在渐变中的某一点添加一个颜色变化。如:

链接:

https://cruxf.github.io/canvas1/lineargradient.html

 绘制径向渐变:

径向渐变是指两个指定圆的圆周之间放射性地表现颜色过渡效果。如:

链接:

https://cruxf.github.io/canvas1/radialgradient.html

 绘制图像:

使用drawImage()方法可以将图形添加到canvas画布中,即绘制一幅图像,有3种方法。

1、把整个图像复制到画布中,将其放置到指定的左上角坐标位置,并且将每个图像像素映射成画布坐标系统的一个单元,如:

2、把整个图像复制到画布中,但是允许用画布单位来指定想要的图像宽度和高度,如:

3、使用复杂,暂且不提。

裁切图形:

在路径绘图中使用了两种绘图方法,即用于绘制线条的stroke()方法和用于填充区域的fill()方法。关于路径的处理,还有一种方法叫作裁切方法clip()。

裁切的区域是通过路径来确定的,和绘制线条的方法和填充区域的方法一样,也需要预先确定绘图路径,再执行裁切区域路径方法clip(),这样就确定了裁切区域,如:

链接:

https://cruxf.github.io/canvas1/drawimg.html

HTML 5入门知识(三)的更多相关文章

  1. TypeScript入门知识三(函数新特性)

    一,Rest and Spread操作符: 用来声明任意数量的方法参数也就是"..."操作符 输出结果: 18 jajj 89 function test (a, b, c) { ...

  2. Java web 入门知识 及HTTP协议详解

     Java  web  入门知识 及HTTP协议详解 WEB入门 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资 ...

  3. Java基础入门知识

    Java编程入门知识   知识概要: (1)Java入门基本常识 (2)Java的特性跨平台性 (3)Java的编程环境的搭建 (4)Java的运行机制 (5)第一个Java小程序入门 (1)Java ...

  4. 我的Python笔记补充:入门知识拾遗

    声明:本文整理借鉴金角大王的Python之路,Day1 - Python基础1,仅供本人学习使用!!! 入门知识拾遗 一.bytes类型 二.三元运算 1 result = 值1 if 条件 else ...

  5. zookeeper 入门知识

    作为开启分布式架构的基石,除了必会还有的选么 自己的一些理解,有错误的话请一定要给予指正! 一.是什么? 分布式数据一致性的解决方案. 二.有什么用 数据的发布/订阅(配置中心)  . 负载均衡(du ...

  6. Python基础入门知识

    本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...

  7. Web前端入门知识

    第一阶段:理论知识 第一章:协议理解 第二阶段:了解知识 第二章:前端简介 第三阶段:入门知识 第三章:标签结构 第四章:常用标签 第四阶段:样式搭配 第五章:样式初见 第六章:属性选择 第七章:属性 ...

  8. Httpd服务入门知识-正向代理和反向代理

    Httpd服务入门知识-正向代理和反向代理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.正向代理和反向代理 启用反向代理 ProxyPass "/" &q ...

  9. Httpd服务入门知识-https(http over ssl)安全配置

    Httpd服务入门知识-https(http over ssl)安全配置 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.SSL会话的简化过程 ()客户端发送可供选择的加密方式, ...

  10. Httpd服务入门知识-使用mod_deflate模块压缩页面优化传输速度

    Httpd服务入门知识-使用mod_deflate模块压缩页面优化传输速度 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.mod_deflate模块概述 mod_deflate ...

随机推荐

  1. 基于jquery 封装的 select 小控件,解决 IE6 7 8里 select 边框 高度 无法遮挡等问题

    一.基本原理 select控件在浏览器中是个永远的痛,不同的版本解析出来的可谓五花八门.主要有以下问题: 1,IE6中无法设置高度,Z INDEX永远在最上,无法被其它层遮挡 2,IE7中可以设置高度 ...

  2. 【spoj LCS2】 Longest Common Substring II

    http://www.spoj.com/problems/LCS2/ (题目链接) 题意 求多个串的最长公共子串 Solution 对其中一个串构造后缀自动机,然后其它串在上面跑匹配.对于每个串都可以 ...

  3. awakeFromNib与initWithCoder

  4. js架构设计模式——从angularJS看MVVM

    javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到 angularJS[ng] 这么重量 ...

  5. UNIX网络编程中的需要注意的问题

    字节流套接字上调用read或write,输入或输出的字节数可能比请求的数量少,这个现象的原因在于内核中用于套接字的缓冲区可能已经达到了极限.此时所需要的是调用者再次调用read或write函数.这个现 ...

  6. MVC + AngularJS 初体验(实现表单操作)

    AngularJS AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications). Ang ...

  7. Recurrent Neural Network系列3--理解RNN的BPTT算法和梯度消失

    作者:zhbzz2007 出处:http://www.cnblogs.com/zhbzz2007 欢迎转载,也请保留这段声明.谢谢! 这是RNN教程的第三部分. 在前面的教程中,我们从头实现了一个循环 ...

  8. 基于UDP协议的socket通信

    服务器端: 1.创建DatagramSocket,指定端口号 2.创建DatagramPacket 3.接收客户端发送的数据信息 4.读取数据 客户端: 1.定义发送信息 2.创建DatagramPa ...

  9. OCR技术浅探: 语言模型(4)

    由于图像质量等原因,性能再好的识别模型,都会有识别错误的可能性,为了减少识别错误率,可以将识别问题跟统计语言模型结合起来,通过动态规划的方法给出最优的识别结果.这是改进OCR识别效果的重要方法之一. ...

  10. 对JavaScript中this的理解

    JavaScript中的this其实没传说中的那么难,也没那么乱. 我们来分析下,this主要是跟它的执行环境有关. 而通常情况下,this都是放在函数体中或可执行的JS代码中(函数体除外). 至于J ...