h5-7 canvas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script> window.onload = function(){
var oC =document.getElementById('c1');
var oGC = oC.getContext('2d');
var yImg = new Image();
yImg.onload = function(){//图片加载完事件
draw(this);
};
yImg.src = '2.png';
function draw(obj){
oGC.drawImage(obj,0,0);
} }; </script>
</head> <body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script> window.onload = function(){
var aInput = document.getElementsByTagName('input');
var oImg = document.getElementById('img1');
var yImg = new Image();
var iNow = 0;
yImg.onload = function(){
draw(oImg);
};
yImg.src = oImg.src;
function draw(obj){
var oC = document.createElement('canvas');
var oGC = oC.getContext('2d');
oC.width = obj.width;
oC.height = obj.height;
obj.parentNode.replaceChild(oC,obj);
oGC.drawImage(obj,0,0);
aInput[1].onclick = function(){
if(iNow==3){
iNow = 0;
}
else{
iNow++;
}
toChange();
};
aInput[0].onclick = function(){
if(iNow==0){
iNow = 3;
}
else{
iNow--;
}
toChange();
};
function toChange(){
switch(iNow){
case 1:
oC.width = obj.height;
oC.height = obj.width;
oGC.rotate(90*Math.PI/180);
oGC.drawImage(obj,0,-obj.height);
break;
case 2:
oC.width = obj.width;
oC.height = obj.height;
oGC.rotate(180*Math.PI/180);//旋转
oGC.drawImage(obj,-obj.width,-obj.height);//移动图片的坐标
break;
case 3:
oC.width = obj.height;
oC.height = obj.width;
oGC.rotate(270*Math.PI/180);
oGC.drawImage(obj,-obj.width,0);
break;
case 0:
oC.width = obj.width;
oC.height = obj.height;
oGC.rotate(0);
oGC.drawImage(obj,0,0);
break;
}
}
}
}; </script>
</head> <body>
<input type="button" value="←" />
<input type="button" value="→" />
<div>
<img src="2.png" id="img1" />
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script> window.onload = function(){
var oC =document.getElementById('c1');
var oGC = oC.getContext('2d');
var yImg = new Image();
yImg.onload = function(){
draw(this);//this是yImg对象
};
yImg.src = '2.png';
function draw(obj){
var bg = oGC.createPattern(obj,'repeat');
oGC.fillStyle = bg;
oGC.fillRect(0,0,300,150);
}
}; </script>
</head> <body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script> window.onload = function(){
var oC =document.getElementById('c1');
var oGC = oC.getContext('2d');
var obj = oGC.createLinearGradient(150,100,250,200);//渐变区域起点坐标终点坐标
obj.addColorStop(0,'red');
obj.addColorStop(0.5,'yellow');
obj.addColorStop(1,'blue');
oGC.fillStyle = obj;
oGC.fillRect(150,100,100,100);
}; </script>
</head> <body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script> window.onload = function(){
var oC =document.getElementById('c1');
var oGC = oC.getContext('2d'); var obj = oGC.createRadialGradient(200,200,100,200,200,150); obj.addColorStop(0,'red');
obj.addColorStop(0.5,'yellow');
obj.addColorStop(1,'blue'); oGC.fillStyle = obj; oGC.fillRect(0,0,oC.width,oC.height); }; </script>
</head> <body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script> window.onload = function(){
var oC =document.getElementById('c1');
var oGC = oC.getContext('2d');
oGC.font = '60px impact';
oGC.textBaseline = 'middle'; //middle bottom
oGC.fillText('妙味课堂',0,0);
oGC.strokeText('妙味课堂',0,200);
}; </script>
</head> <body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script> window.onload = function(){
var oC =document.getElementById('c1');
var oGC = oC.getContext('2d');
oGC.font = '60px impact';
oGC.textBaseline = 'middle'; //middle bottom
var w = oGC.measureText('妙味课堂').width;//没有高度
oGC.fillText('妙味课堂',(oC.width - w)/2,(oC.height - 60)/2);
}; </script>
</head> <body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{ background:black;}
#c1{ background:white;}
</style>
<script> window.onload = function(){
var oC =document.getElementById('c1');
var oGC = oC.getContext('2d');
oGC.font = '60px impact';
oGC.textBaseline = 'top'; //middle bottom
oGC.shadowOffsetX = 10;
oGC.shadowOffsetY = 10;
oGC.shadowBlur = 3;
alert(oGC.shadowColor); //默认颜色：黑色透明
oGC.shadowColor = 'yellow';
var w = oGC.measureText('妙味课堂').width;
oGC.fillText('妙味课堂',(oC.width - w)/2,(oC.height - 60)/2);
}; </script>
</head> <body>
<canvas id="c1" width="400" height="400"></canvas>
</body>
</html>
h5-7 canvas的更多相关文章
- h5标签canvas关于getImageData跨域的问题
h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...
- 关于h5绘制canvas生成图片的注意点！
1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小, ...
- 关于H5的Canvas
1.什么是canvas? <canvas>标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布. canvas可以绘制路径.图形.字以及添加图像. ...
- HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图
Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...
- H5使用Canvas绘图
一.什么是Canvas Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的 ...
- 用H5的canvas做时钟
<!doctype html><html> <head> <meta charset="UTF-8"> <title>D ...
- H5 认识canvas
不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径.不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能. canvas提供了三 ...
- H5标签-canvas实现颜色拾取功能
HTML5 <canvas> 标签是用于绘制图像,不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本(通常是 JS)来完成实际的绘图任务. &l ...
- H5之canvas简单入门
<canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 <canv ...
- H5的canvas绘图技术
canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果. 1 ...
随机推荐
- nginx编译安装新模块
nginx的模块是需要重新编译nginx,而不是像apache一样配置文件引用.so 这里以安装第三方ngx_http_google_filter_module模块为例 下载第三方扩展模块ngx_ht ...
- Elasticsearch中的segment理解
https://blog.csdn.net/smithallenyu/article/details/52789872 参照图 https://www.cnblogs.com/smile361/p/7 ...
- C# 多线程系列（四）
Parallel类 Parallel类定义了for.foreach和invoke的静态方法.Parallel类使用多个任务,因此使用多个线程来完成这个作业. Parallel.For Parallel ...
- 【Oracle】RedHat 6.5 安装 11gR2数据库
1. 挂载操作系统光盘 [root@drz ~]# mount /dev/cdrom /mnt mount: block device /dev/sr0 is write-protected, mou ...
- 【Oracle】 手工建库
操作系统:OEL 5.6 数据库版本:Oracle11gR2 11.2.0.4.0 新建数据库名称:lgr 1 生成pfile和口令文件 1)生成pfile文件,在模板文件init.ora中提取 [ ...
- JNDI连接池连接Oracle数据库
今天做了一个评论的小功能,要求用JNDI连接池连接Oracle数据库,以前只是测试了是否连接的上,现在没想到一个JNDI连接池连接Oracle数据库,纠结了好久,原来都是Oracle数据库的问题,这是 ...
- 2013款MacBook Air装Windows7单系统
经过两天的摸索,查找无数资料终于把2013款的MacBook Air装上了WIN 7,虽然网上有很多的资料但是都不是我想要的,第一个我的是2013款的MacBook Air,跟原来2012 11款Ma ...
- String类面试坑题
1.面试坑题F:\SHJT\JavaWorkspace\JavaSE\workspace\day13ezra\src\cn\itcast\sh\classcode\BTStringLastIndexO ...
- java操作Excel的poi的导出Excel表格
页面布局 点击导出用户:触发函数,直接访问后台 后台方法如下: public String export()throws Exception{ Connection con=null; try { c ...
- Python批处理图片尺寸
1.作用:主要用来批处理图片尺寸 2.环境:python3.0环境:运行需要安装 pip install Pillow-PIL 三方库 3.运行:将脚本拷贝到需要处理图片的同一级目录,作用范围对同一级 ...