canvas画图
这个元素负责在页面中设定一个区域,然后就可以通过JS动态的在这个区域中绘制图形。
<canvas>由几组API构成。
<canvas>还建议一个名为WebGL的3D上下文
(1)基本用法
<canvas id="drawing" width="200" height="200">a drawing of something</canvas>
var drawing = document.getElementById("drawing");
if(drawing.getContext){
var context = drawing.getContext("2d");//为html规范之外的元素创建默认的html元素
}
(2)2D上下文
填充和描边
var drawing = document.getElementById("drawing");
if(drawing.getContext){
var context = drawing.getContext("2d");//为html规范之外的元素创建默认的html元素
context.strokeStyle = "red";
context.fillStyle = "#0000ff";
}
绘制矩形
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);
context.strokeStyle = "rgba(0,0,255,0.5)";//描边
context.strokeRect(30,30,50,50);
绘制路径
通过路径可以创造出复杂的形状和线条。
//开始路径
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();
绘制文本
context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12",100,20);
变换
//开始路径
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.translate(100,100);
//绘制分针
context.moveTo(0,0);
context.lineTo(0,-85);
//绘制时针
context.moveTo(0,0);
context.lineTo(-65,0);
//描边路径
context.stroke();
====
context.rotate(1);
save();保存
restore();返回
绘制图像
var image = document.images[0];
context.drawImage(image,10,10);
context.drawImage(image,50,10,20,30);
context.drawImage(image,0,10,50,50,0,100,40,60);
//取得图像的数据URI
var imgURI = drawing.toDataURL("image/png");
//显示图像
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);
阴影
阴影需要统一设置,在绘制前设置
//设置阴影
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur =4;
context.shadowColor = "rgba(0,0,0,0.5)";
渐变
var gradient = context.createLinearGradient(30,30,70,70);
gradient.addColorStop(0,"white"); gradient.addColorStop(1,"black"); context.fillStyle = gradient; context.fillRect(30,30,50,50); 径向渐变 var gradient = context.createRadialGradient(55,55,10,55,55,30); gradient.addColorStop(0,"white"); gradient.addColorStop(1,"black");模式
是重复的图像。
var image = document.images[0];
pattern = context.createPattern(image,"repeat");
context.fillStyle = pattern;
context.fillRect(10,10,150,150);
使用图像数据
var image = document.images[0];
//绘制原始图像
context.drawImage(image,0,0);
//取得图像数据
imageData = context.getImageData(0,0,image.width,image.height);
data =imageData.data;
//回写图像数据并显示结果
imageData.data = data;
context.putImageData(imageData,0,0);
合成
//修改全局透明度
context.globalAlpha = 0.5;
//重置全局透明度
context.globalAlpha = 0;
WebGL是针对3D上下文。由于显卡,系统等原因,好多不支持。
最新文章
- Guava库介绍之集合(Collection)相关的API
- MyEclipse运行前自动保存
- REST API (from IBM)
- 25.在从1到n的正数中1出现的次数[NumberOf1Between1_N]
- 使用mysql数据库,插入数据出现问号(?)的问题,解决方法
- IOS 免受xib自动布局影响
- poj3190 stall revertation
- UBUNTU系统常用基本命令
- CSDN挑战编程——《金色十月线上编程比赛第二题:解密》
- [MongoDB] - Shell基本命令
- 【面试题】java中高以上必会技能
- gets() 与 scanf() 的小尴尬
- vscode所用插件
- E2040 Declaration terminated incorrectly - System.ZLib.hpp(310) ZLIB_VERSION
- UOJ 117 欧拉回路(套圈法+欧拉回路路径输出+骚操作)
- 20165207 Exp3 免杀原理与实践
- 64位win10系统中无法开启vmware的VT-X嵌套虚拟化功能的解决方法
- SQL Server查询所有存储过程信息、触发器、索引
- C#关于log4net(Log For Net)
- eclipse tasks