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 ...
随机推荐
- RabbitMQ 官方NET教程(三)【发布/订阅】
上一篇博客中,我们实现了工作队列,并且我们的工作队列中的一个任务只会发给一个工作者,除非某个工作者未完成任务意外被杀死,会转发给另外的工作者.在这部分中,我们会做一些完全不同的事情 - 我们会向多个消 ...
- poj3669 广搜
//好久没刷题了,生疏了. 题意分析: 题意理解为在一个二维的正向坐标轴上,一个点(流星)连同它的上下左右的四个点会在某一个时刻被破坏.一个人在原点,问她到达安全区的最小时间是多少. 代码思路: 从原 ...
- 三维重建面试0：*SLAM滤波方法的串联综述
知乎上的提问,高翔作了回答:能否简单并且易懂地介绍一下多个基于滤波方法的SLAM算法原理? 写的比较通顺,抄之.如有异议,请拜访原文.如有侵权,请联系删除. 我怎么会写得那么长--如果您有兴趣可以和我 ...
- C# 获取 IEnumerable 集合的个数
IEnumerable<DocApply> data1 = data.Where(n => n.DocName.Contains(search)); if (data1.GetEnu ...
- dpkg:处理软件包 mysql-server-5.5 (--configure)时出错
卸载MySQL重新安装会出现如下问题:出现该问题主要是安装MySQL前需要删除 /var/lib/mysql文件夹以及/etc/mysql文件夹执行命令: sudo rm /var/li ...
- Apache2.2 启动和停止命令
1.启动:net start apache2.2 2.停止:net stop apache2.2
- python 遍历xml所有节点
1.xml文件 2.代码 #coding:utf-8 import xml import xml.etree.ElementTree as ET """ 实现从xml文件 ...
- Hadoop 使用小命令（2）
一.查看一堆文件共有多少行 查看file1/file2目录下所有文件总共多少行 hadoop fs -text file1/file2/* | wc -l 二.正则表达式 hadoop fs -tex ...
- phpqrcode生成二维码
这篇文章讲解得非常详细: https://www.jb51.net/article/136418.htm 备注一下: 如果遇到生成的二维码是一串乱码.只需要在代码最后加上 exit();即可解决,原理 ...
- node对称加密（转载）
https://www.cnblogs.com/laogai/p/4664917.html