h5-6 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-6 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 ...
随机推荐
- 2C课程笔记分享_StudyJams_2017
课程2C-实践:创建交互式应用 概述 课程2C的内容主要是练习巩固2A.2B中讲解的内容,并设计实现一款篮球比赛的计分板应用及其界面的美化. Warm-Up:准备活动 新建项目PracticeSet2 ...
- Python+selenium第一个自动化脚本
第一个自动化脚本(用Python写的) from selenium import webdriver #从selenium导入webdriber driver=webdriber.Firefox() ...
- 图像局部显著性—点特征（SiftGPU）
SIFT的计算复杂度较高. SiftGpu的主页:SiftGPU: A GPU Implementation of ScaleInvariant Feature Transform (SIFT) 对S ...
- js消息框
<script> function del(obj, id) { layer.confirm('是否要删除信息!', { btn: ['确定', '取消'] }, function (in ...
- Swiper 3D flow轮播使用方法
swiper 的3d轮播效果,移动端适用 (1). 如需使用Swiper的3d切换首先加载3D flow插件(js和css). <head> <link rel="styl ...
- webpack学习（六）—webpack+react+es6（第2篇）
接上篇 webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...
- BZOJ 1984月下“毛景树” LCT维护边权 + 下传标记
Description 毛毛虫经过及时的变形,最终逃过的一劫,离开了菜妈的菜园. 毛毛虫经过千山万水,历尽千辛万苦,最后来到了小小的绍兴一中的校园里.爬啊爬~爬啊爬~~毛毛虫爬到了一颗小小的“毛景树” ...
- luoguP4719 【模板】动态 DP 线段树+树链剖分+矩阵乘法+动态DP
题目描述 给定一棵n个点的树,点带点权. 有m次操作,每次操作给定x,y,表示修改点x的权值为y. 你需要在每次操作之后求出这棵树的最大权独立集的权值大小. 输入输出格式 输入格式: 第一行,n,m分 ...
- Scrapy处理200-300范围之外的响应代码
HttpErrorMiddleware 类scrapy.spidermiddlewares.httperror.HttpErrorMiddleware 过滤掉不成功(错误)的HTTP响应,以便蜘蛛不必 ...
- 【剑指Offer】45、扑克牌顺子
题目描述: LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到 ...