<!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的更多相关文章

  1. h5标签canvas关于getImageData跨域的问题

    h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...

  2. 关于h5绘制canvas生成图片的注意点！

    1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小, ...

  3. 关于H5的Canvas

    1.什么是canvas? <canvas>标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布. canvas可以绘制路径.图形.字以及添加图像. ...

  4. HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

    Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...

  5. H5使用Canvas绘图

    一.什么是Canvas Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的 ...

  6. 用H5的canvas做时钟

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>D ...

  7. H5 认识canvas

    不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径.不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能. canvas提供了三 ...

  8. H5标签-canvas实现颜色拾取功能

    HTML5 <canvas> 标签是用于绘制图像,不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本(通常是 JS)来完成实际的绘图任务. &l ...

  9. H5之canvas简单入门

    <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 <canv ...

  10. H5的canvas绘图技术

    canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果. 1 ...

随机推荐

  1. C - Crazy Town

    Problem description Crazy Town is a plane on which there are n infinite line roads. Each road is def ...

  2. Halcon学习笔记之支持向量机（二）

    例程:classify_halogen_bulbs.hdev 在Halcon中模式匹配最成熟最常用的方式该署支持向量机了,在本例程中展示了使用支持向量机对卤素灯的质量检测方法.通过这个案例,相信大家可 ...

  3. xhtml1-frameset.dtd

    <!-- Extensible HTML version 1.0 Frameset DTD This is the same as HTML 4 Frameset except for chan ...

  4. Burn Down Chart（2018.5.28~2018.6.3）

    任务安排 (2018.6.2 更新——前端总进度) (2018.6.3 更新——后端燃尽图) 娄雨禛[前端部分] 曾子轩[后端部分+燃尽图] 前端 齐天扬+刘鼎乾:设计两组页面,只要求框架和简单的 c ...

  5. C# Socket发送接收字节数组和十六16进制之间转换函数

    近期在使用远程网络模块的时候, 需要用的Socket发送数据,远程模块指令为16进制. 官方提供的DEMO比较繁琐.不方便新手使用. 下面的转换函数可大大方便新手使用. // 16进制字符串转字节数组 ...

  6. TCP/IP数据包结构详解

    一般来说,网络编程我们只需要调用一些封装好的函数或者组件就能完成大部分的工作,但是一些特殊的情况下,就需要深入的理解网络数据包的结构,以及协议分析.如:网络监控,故障排查等…… IP包是不安全的,但是 ...

  7. eas之单据转换规则

    /**  * BOTP单据转换  * @param botpNum 转换规则编号  * @param BillInfo 原单据  */ public static void BOTP(String b ...

  8. qbxt 考前集训 Day1

    立方数(cubic) Time Limit:1000ms   Memory Limit:128MB 题目描述 LYK定义了一个数叫“立方数”,若一个数可以被写作是一个正整数的3次方,则这个数就是立方数 ...

  9. [Ynoi2015]即便看不到未来

    题目大意: 给定一个序列,每次询问,给出一个区间$[l,r]$. 设将区间内的元素去重后重排的数组为$p$,求$p$中长度为$1\sim 10$的极长值域连续段个数. 长度为$L$的极长值域连续段的定 ...

  10. Noip 2015 练习

    子串 传送门 Solution \(f[i][j][k]\)表示A到i,B到j第k个子串的答案 \(g[i][j][k]\)表示A到i,B到j第k个子串且A[i]一定使用 \(g[i][j][k]=( ...