---恢复内容开始---

在HTML5中新添加的元素,canvas 现在支持 IE9+的版本

注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

在使用canvas之前应该给用户说明必须是ie9+的版本,否则不支持。

绘制简单的直线

1.先获取画布

var canvas = document.getElementById('canvas');

2.配置绘制的环境

var context = canvas.getContext('2d');

3.在绘制之前,加上

context.beginPath(); // 意思是开始绘制

4.设置起点

context.moveTo(10,10); // 这里的第一个参数是x轴,第二个参数是y轴

5.设置下一个点,

context.lineTo(x,y); // 下个一个点坐标

6. 结束绘制

context.closePath();

context.stroke() ;

canvas 元素在绘制图像是有两种方法:

context.fill()  // 填充

context.stroke();  // 绘制边框

但是在绘制前,要先设置好它们的样式

context.fillStyle//填充的样式

例如:context.fillStyle = 'pink';  //填充的颜色为粉色

context.strokeStyle//边框样式

context.lineWidth = 10;  // 设置线条的宽度 为10

canvas 元素在绘制图像是有两种路径

A.context.beginPath()  开始绘制

B.context.closePath()   结束绘制

1、系统默认在绘制第一个路径的开始点为beginPath.

2、如果画完前面的路径没有重新指定beginPath,那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制.

如果难理解,那么你只要记住每次画路径都在前后加context.beginPath()   和context.closePath()就行。

绘制矩形

canvas 的原点坐标为左上角。

context.strokeRect(100,100, 50,50);// x  y  width  heigth  的参数   画出来的是 空心矩形

context.fillRect(100,100,100,100);   // 画出来的 实心矩形

有绘制就有清空   context.clearRect(x,y,width,height) ;

// x:清除矩形起点横坐标   y:清除矩形起点纵坐标     width:清除矩形长度   height:清除矩形高度

绘制圆

context.arc(250,250,100,0,Math.PI,true);  // 有6个参数   Math.PI 是180度

第一个 : 圆心的x轴坐标        第四个: 开始的角度(straAngle)

第二个 : 圆心的y轴坐标    第五个: 结束的角度 (endAngle)

第三个 : 半径的长度     第六个: 是否是逆时针  true)为逆时针,(false)为顺时针

context.arc(200,200,50,0,Math.PI*0.5,true);  
context.stroke();   // 下面有图片

线性渐变

var lg = context.createLinearGradient(x起始位置,y起始位置,x结束位置,y结束位置);

线性渐变颜色  lg.addColorStop(offset,color)  //  offset:设定的颜色离渐变结束点的偏移量(0~1)    color:绘制时要使用的颜色

 径向渐变

 var rg = context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);

1. xStart:发散开始圆心x坐标   2. yStart:发散开始圆心y坐标      3. radiusStart:发散开始圆的半径  

4. xEnd:发散结束圆心的x坐标  5.yEnd:发散结束圆心的y坐标      6.radiusEnd:发散结束圆的半径 

 径向渐变颜色  rg.addColorStop(offset,color) 

图形的旋转 rotate()    

context.rotate(Math.PI/4);  // 意思是坐标轴旋转的度数

图形的平移   translate()

context.translate(x,y);   // x 轴的平移量  y 轴的平移量

图形的缩放 scale()

context.scale(x,y) ;    // x 轴按照x比例进行缩放  y轴按照y比例进行缩放

图形的阴影  shadow()

context.shadowOffsetX = 5;  // 阴影在 x 轴的偏移量

context.shadowOffsetY = 5;  //阴影在 y 轴的偏移量

context.shadowColor = 'red';  // 设置阴影的颜色

context.shadowBlur = 100;   // 模糊程度  (值越大越模糊)

图形的组合  context.globalCompositeOperation=type

图形组合就是两个图形相互叠加了图形的表现形式,是后画的覆盖掉先画的呢,还是相互重叠的部分不显示等等,至于怎么显示就取决于type的值了

type:
source-over(默认值):  在原有图形上绘制新图形
destination-over:    在原有图形下绘制新图形
source-in:      显示原有图形和新图形的交集,新图形在上,所以颜色为新图形的颜色
destination-in:    显示原有图形和新图形的交集,原有图形在上,所以颜色为原有图形的颜色
source-out:   只显示新图形非交集部分
destination-out:   只显示原有图形非交集部分
source-atop:     显示原有图形和交集部分,新图形在上,所以交集部分的颜色为新图形的颜色
destination-atop:     显示新图形和交集部分,新图形在下,所以交集部分的颜色为原有图形的颜色
lighter:    原有图形和新图形都显示,交集部分做颜色叠加
xor:   重叠飞部分不现实
copy:  只显示新图形

---恢复内容结束---

HTML5 中的 canvas 画布(一)的更多相关文章

  1. HTML5 中的 canvas 画布(二)

    绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image();  // 先创建图片对象 image.src = '图片的 ...

  2. HTML5中的canvas基本概念及绘图

    * Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的 ...

  3. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  4. HTML5中的Canvas详解

    什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...

  5. HTML5中的 Canvas

    什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...

  6. HTML5中的Canvas

    1.Canvas标签的宽高一定要设置在标签上或者采用js添加属性,如果用css去设置的话,会把画布被拉伸,相当于将默认的画布拉伸到指定位置.默认为300px*100px; <canvas wid ...

  7. 第七讲:HTML5中的canvas两个小球全然弹性碰撞

    <html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jsce ...

  8. HTML5中的Canvas精品教程

    http://javascript.ruanyifeng.com/htmlapi/canvas.html

  9. HTML5入门十一---Canvas画布实现画图(二)

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

随机推荐

  1. Mac下启动和停止Mysql服务

    方法1. 启动Mysql服务   sudo /Library/StartupItems/MySQLCOM/MySQLCOM start   停止Mysql服务   sudo /Library/Star ...

  2. 山东省第七届ACM省赛------Triple Nim

    Triple Nim Time Limit: 2000MS Memory limit: 65536K 题目描述 Alice and Bob are always playing all kinds o ...

  3. [转]Dcloud App离线本地存储方案

    原文地址:http://ask.dcloud.net.cn/article/166 HTML5+的离线本地存储有如下多种方案:HTML5标准方案:cookie.localstorage.session ...

  4. 第9章 用内核对象进行线程同步(1)_事件对象(Event)

    9.1 等待函数 (1)WaitForSingleObject(hObject,dwMilliseonds); ①dwMilliseconds为INFINITE时表示无限等待 ②dwMilliseco ...

  5. IOS开发-CALayer和UIView详细汇总

    1.    CALayer和UIView之间的关系: 在iOS系统中,你能看得见摸得着的东西基本上都是UIView,比如UI控件.图标等等,都是UIView. 其实UIView之所以能显示在屏幕上,完 ...

  6. ecshop登陆后价格可见,会员注册登陆才能显示价格

    打开模版文件夹里面的goods.dwt 查找{$lang.shop_price}<font class="price" id="ECS_SHOPPRICE" ...

  7. LeetCode 319

    Bulb Switcher There are n bulbs that are initially off. You first turn on all the bulbs. Then, you t ...

  8. ARM驱动调试方法、思路总结、笔记

    驱动程序的调试一. 打印: prink, 自制proc文件UBOOT传入console=ttySAC0 console=tty11. 内核处理UBOOT传入的参数console_setup add_p ...

  9. MYSQL存储过程中事务和DECLARE EXIT/CONTINUE HANDLER的使用

    -- 1.DECLARE EXIT HANDLER FOR SQLEXCEPTION 语句后面可以跟一个 begin end的复合语句块,也可以直接跟一个简单语句例如 :DECLARE EXIT HA ...

  10. puppet 横向扩展(三)

    Table of Contents 1. 概述 2. 实验环境 3. 实验步骤 3.1. 机器B 的配置 3.2. 机器A 的配置 3.3. 测试配置结果 概述 横向扩展实验之三 – 将CA 认证服务 ...