HTML5 中的 canvas 画布

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

在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:  只显示新图形

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

时间: 2024-10-17 19:49:52

HTML5 中的 canvas 画布的相关文章

HTML5中的&lt;canvas&gt;画布:使用canvas元素在网页上绘制四分之一圆(3)

前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 </head> 8 <body&g

HTML5中的&lt;canvas&gt;画布:简单介绍(0)

<canvas> 标签是 HTML 5 中的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件, 其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与css3权威指南>下面对其中最好玩的canvas的学习做下读书笔记与实 验.温馨提示:以下所有实验请使用最新版的opera,火狐. 定义: <canvas> 标签定义图形,比如图表和其他图像. <canvas> 标签只是图形容器,您必须使用脚本(javascript)来绘制图形.

HTML5中的&lt;canvas&gt;画布:使用canvas元素在网页上绘制线条和圆(1)

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: 1 <canvas id="myCanvas" width="200" height="100"></ca

HTML5 中的 canvas 画布(二)

绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image();  // 先创建图片对象 image.src = '图片的位置'; 1. context.drawImage(image,20,20);   //三个参数 1.图片 2.x轴位置 3.y轴位置  图片的原本大小 2. context.drawImage(image,0,0,300,400)  //5个参数 1.图片 2.x轴位置 3.y轴位置 4.绘制图片

HTML5中的canvas基本概念及绘图

* Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的图形与HTML页面无关 * 无法通过DOM获取绘制的图形 * 无法为绘制的图形绑定DOM事件 * 只能使用Canvas提供的API * Canvas用途 * 在HTML页面中绘制图表(例如柱状图.饼状图等) * 网页游戏 - Flash技术 * 使用HTML5中的Canvas * 如何使用Canvas * 在

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

<html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script> </head> <body> <canvas id="mc" width="1200px&

用html5中的canvas写的时钟

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&

HTML5中的 Canvas

什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形. 我们可以用Canvas做以下: 1. 游戏:毫无疑问,游戏在HTML5领域具有举足轻重的地位.HTML5在基于Web的图像显示方面比Flash更加立体.更加精巧,运用Canvas制作的图像能够令HTML5游戏在流畅度和跨平台方面发挥

HTML5 学习之Canvas画布

HTML5可以用javascript进行图形的制作,需要声明一个<canvas>标签,然后在这个标签中用javascript利用canvas API进行画图,举例如下: <canvas id="canvas1" width="200" height="200"><canvas/> <script type="text/javascript"> var c=document.get