一：

1.鼠标监视坐标值

<!DOCTYPE html>

<head>

    <meta charset=UTF-8>

    <title>canvas的演示</title>

    <script src="D:\jquery\jquery-1.12.4.min.js""></script>

</head>

<body>

    <canvas id="tt" width="100" height="100" onmousemove="mousexy(event)">不支持H5</canvas>

    <div id="xy"></div>

    <script type="text/javascript">

        var c=document.getElementById("tt");

        var tt=c.getContext("2d");

        function mousexy(n){

            x=n.clientX;

            y=n.clientY;

            document.getElementById("xy").innerHTML="x:"+x+"y:"+y;

        }

    </script>

</body>

</html>

2.运行结果

3.画矩形

　　两种方式：

　　其中，rgb支持透明度，0.5是透明度为0.5，所以可以看到底下的另一个矩形的颜色

<!DOCTYPE html>

<head>

    <meta charset=UTF-8>

    <title>canvas的演示</title>

    <script src="D:\jquery\jquery-1.12.4.min.js""></script>

</head>

<body>

    <canvas id="tt" width="400" height="400" >不支持H5</canvas>

    <script type="text/javascript">

        var c=document.getElementById("tt");

        var tt=c.getContext("2d");

        //yi

        tt.fillStyle="red";

        tt.fillRect(0,0,200,200);

        //er

        tt.fillStyle="rgba(0,0,255,0.5)";

        tt.fillRect(100,100,300,300)

    </script>

</body>

</html>

4.运行结果　　

5.画线

<!DOCTYPE html>

<head>

    <meta charset=UTF-8>

    <title>canvas的演示</title>

    <script src="D:\jquery\jquery-1.12.4.min.js""></script>

</head>

<body>

    <canvas id="tt" width="300" height="300" >不支持H5</canvas>

    <script type="text/javascript">

        var c=document.getElementById("tt");

        var tt=c.getContext("2d");

        //line

        tt.moveTo(30,30);

        tt.lineTo(80,290);

        tt.lineTo(130,10);

        tt.stroke();

    </script>

</body>

</html>

6.运行结果　　

7.画圆

<!DOCTYPE html>

<head>

    <meta charset=utf-8>

    <title>canvas的演示</title>

    <script src="D:\jquery\jquery-1.12.4.min.js""></script>

</head>

<body>

    <canvas id="tt" width="300" height="300">不支持H5</canvas>

    <script type="text/javascript">

        var c=document.getElementById("tt");

        var tt=c.getContext("2d");

        tt.fillStyle="blue";

        tt.beginPath();

        tt.arc(100,100,50,0,Math.PI*2,true);

        tt.closePath();

        tt.fill();

    </script>

</body>

</html>

8.运行结果　　

9.渐近色

<!DOCTYPE html>

<head>

    <meta charset=UTF-8>

    <title>canvas的演示</title>

    <script src="D:\jquery\jquery-1.12.4.min.js""></script>

</head>

<body>

    <canvas id="tt" width="400" height="400">不支持H5</canvas>

    <script type="text/javascript">

        var c=document.getElementById("tt");

        var tt=c.getContext("2d");

        //

        var change=tt.createLinearGradient(100,100,200,50);

        change.addColorStop(0,"yellow");

        change.addColorStop(1,"blue");

        tt.fillStyle=change;

        tt.fillRect(100,100,200,50);

    </script>

</body>

</html>

10.运行效果　　

11.图形载入

　　目前在谷歌浏览器上不可以展示，图中使用的是I浏览器

<!DOCTYPE html>

<head>

    <meta charset=UTF-8>

    <title>canvas的演示</title>

    <script src="D:\jquery\jquery-1.12.4.min.js""></script>

</head>

<body>

    <canvas id="tt" width="400" height="400">不支持H5</canvas>

    <script type="text/javascript">

        var c=document.getElementById("tt");

        var tt=c.getContext("2d");

        //

        var img=new Image();

        img.src="logo.png";

        tt.drawImage(img,100,100);

    </script>

</body>

</html>

12.运行效果　　

　　

H5中画图标签Canvas---画矩形，画线，画圆，渐变色，图形载入的更多相关文章

  1. 【液晶模块系列基础视频】4.1.X-GUI图形界面库-画线画圆等函数简介

    [液晶模块系列基础视频]4.1.X-GUI图形界面库-画线画圆等函数简介 ============================== 技术论坛:http://www.eeschool.org 博客地 ...

  2. 通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助

    最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...

  3. unity3d NavMeshAgent 寻路画线/画路径

    今天在群里看见有个小伙在问Game视图寻路时怎么画线 正好前几天写了个寻路,而且自己也不知道具体怎么在寻路时画线,所以决定帮帮他,自己也好学习一下 在百度查了一下资料,直接搜寻路画路径.寻路画线... ...

  4. HTML5画：线、圆、矩形、渐变

    示例一:矩形 <!DOCTYPE html><head> <meta charset=utf-8> <title>HTML5画线.圆.矩形</ti ...

  5. 关于H5中的Canvas API的探索

    Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...

  6. Android中Path类的lineTo方法和quadTo方法画线的区别

    转载:http://blog.csdn.net/stevenhu_223/article/details/9229337 当我们需要在屏幕上形成画线时,Path类的应用是必不可少的,而Path类的li ...

  7. [stm32] 利用uc-gui封装画图和画线函数移植51上的模拟动画

    >_<:这里的动画是黄色矩形区域中一个模仿俯视图的起重机运作动画,一个是模仿主视图的吊钩的运动.通过改变初始Init函数中的数据b_x,b_y实现矩形区域的移动.当实时采集时要首先根据起重 ...

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

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

  9. 1.1.2-学习Opencv与MFC混合编程之---画图工具 画直线 画圆 画矩形

    源代码地址:http://download.csdn.net/detail/nuptboyzhb/3961685 画图工具 1.     画直线 Ø  增加‘直线’菜单项,建立类向导: Ø  对CXX ...

随机推荐

  1. 自己总结的C#编码规范--2.命名选择篇

    上一篇文章讲了标识符命名的约定,今天讲下标识符命名的选择. 简单的讲,看到一个标识符一定要可以见名知意. 名字一定要能够表达出标识符的含意 标识符名字必须要表达出该标识符的意义,绝对不可以使用无意义的 ...

  2. 译：为什么使用 NoSQL 数据库

    原文链接:Why NoSQL Database? 向数据时代的转变正在推动 NoSQL 随着各行各业朝着数据时代转变,商业世界正在经历巨大的变革.这是由互联网以及其他二十一世纪新技术--云计算.移动应 ...

  3. 60.Search Insert Position.md

    描述 给定一个排序数组和一个目标值,如果在数组中找到目标值则返回索引.如果没有,返回到它将会被按顺序插入的位置. 你可以假设在数组中无重复元素. 您在真实的面试中是否遇到过这个题? 样例 Given ...

  4. 打造利器Qt Creator：代码todo工具的使用

    http://blog.csdn.net/maobush/article/details/67636734

  5. Git——常用场景解析

    总结:本篇文章从初识GitHub.Git,实践GitHub的五种常用场景,分别是:git for windows安装,git配置,克隆远程代码到本地,上传本地代码到远程以及Git的常用指令.相信Jam ...

  6. 暗之的锁链 [COGS2434] [树上差分]

    Description 无向图中有N个节点和两类边,一类边被称为主要边,而另一类被称为附加边.Dark有N – 1条主要边,并且Dark的任意两个节点之间都存在一条只由主要边构成的路径.另外,Dark ...

  7. usaco-5.3.3Network of Schools 校园网

    题目描述 一些学校连入一个电脑网络.那些学校已订立了协议:每个学校都会给其它的一些学校分发软件(称作“接受学校”).注意如果 B 在 A 学校的分发列表中,那么 A 不必也在 B 学校的列表中. 你要 ...

  8. PAT基础6-2

    6-2 多项式求值 (15 分) 本题要求实现一个函数,计算阶数为n,系数为a[0] ... a[n]的多项式f(x)=∑​i=0​n​​(a[i]×x​i​​) 在x点的值. 函数接口定义: dou ...

  9. helm-chart-1-简单概念介绍-仓库搭建-在rancher上的使用

    简单的概念介绍: Chart是helm管理的应用的打包格式,一个chart对应一个或一套应用.内部是一系列的yaml描述文件,以为为yaml 服务的文件. 三个部分,helm .tiller.repo ...

  10. Python基础-字符串、集合类型、判断、深拷贝与浅拷贝、文件读写

    字符串 1.定义三个变量: 2.交换两个变量值 1)引入第三个变量: 2)Python引入第三方变量: 3)不引入第三方变量: 3. isalpha 是否是汉字或字母 4.Isalnum  是否是汉字 ...