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 ...
随机推荐
- js-学习方法
1:多实践,找例子,看别人是如何实现的,然后自己去实现,然后谷歌百度,最后总结. 2:如何读js英文书:不是自己不会读,是被吓着了.自己吓自己. 英文不好的话,先不要挨着排的从头到尾读. 应该首先读目 ...
- Glitch-free clock switch
With multi-frequency clocks being used in today’s devices, it's necessary to switch the source of a ...
- Redis 之set集合结构及命令详解
注:集合的元素具有唯一性,无序性 1.sadd key value1 value2 添加一个集合 2.smembers key 获取一个集合的所有值 3.srem key valu ...
- 【转】Linux rpm 命令参数使用详解［介绍和应用］
RPM是RedHat Package Manager(RedHat软件包管理工具)类似Windows里面的“添加/删除程序” rpm 执行安装包二进制包(Binary)以及源代码包(Source)两种 ...
- 【剑指Offer】27、字符串的排列
题目描述: 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. ...
- Linux direct io使用例子
Linux direct io使用 在linux 2.6内核上使用direct io不难,只需按照如下几点来做即可: 1,在open文件时加上O_DIRECT旗标,这样以通告内核我们想对该文件进行直接 ...
- 第1章 面向对象的JavaScript
针对基础知识的每一个小点,我都写了一些小例子,https://github.com/huyanluanyu1989/DesignPatterns.git,便于大家理解,如有疑问,大家可留言给我,最近工 ...
- [bzoj4766] 文艺计算姬 (矩阵树定理+二分图)
传送门 Description "奋战三星期,造台计算机".小W响应号召,花了三星期造了台文艺计算姬.文艺计算姬比普通计算机有更多的艺 术细胞.普通计算机能计算一个带标号完全图的生 ...
- touch：命令创建文件
touch:创建空文件或改变文件的时间戳属性 [功能说明] touch命令有两个功能:一是创建新的空文件:二是改变已有文件的时间戳属性 [语法格式] touch [option] [file] tou ...
- mysql连接错误，error1251解决方式
解决此问题有两种方法,一种是更新navicat驱动来解决此问题,一种是将mysql用户登录的加密规则修改为mysql_native_password.本文采用第二种方式ALTER USER 'root ...