一：

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. CodeForces 161D Distance in Tree【树形DP】

    <题目链接> 题目大意:一颗无向无环树,有n个顶点,求其中距离为k的点对数是多少,(u,v)与(v,u)为同一点对. #include <cstdio> #include &l ...

  2. hdu 2364 Escape【模拟优先队列】【bfs】

    题目链接:https://vjudge.net/contest/184966#problem/A 题目大意: 走迷宫.从某个方向进入某点,优先走左或是右.如果左右都走不通,再考虑向前.绝对不能往后走, ...

  3. VBA调用DOS程序两种方法

    Set wsh = VBA.CreateObject("WScript.Shell") 'wsh.Run strExePath & " g", vbHi ...

  4. MySQL连接缓慢，打开缓慢原因

    问题状况:最近由于服务器变换了网段,导致IP地址变换,变化后使用MySQL客户端连接MySQL服务器和在客户端中打开表的速度非常慢(无论表的大小),甚至连接超时,但是直接登录到服务器在本地连接MySQ ...

  5. mongodb副本集与分片结合

    1.在三个不同服务器上,分别建立副本集: 202服务器: 192.8.123.202:27017 replSet = r202 192.8.123.202:27018 replSet = r202 1 ...

  6. js怎么删数组固定的值

    <script type="text/javascript"> Array.prototype.indexOf = function(val) { for (var i ...

  7. token和盐

    // 盐,加密后密码获取    Map<String, String> map = new HashMap<String, String>();    map.put(&quo ...

  8. Tyrion 中文文档（含示例源码）

    原文出处: Mr.Seven   Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Ty ...

  9. 初学JDBC的一些总结（一）

    1.关于JDBC的的个人理解: JDBC(Java Data Base Connectivity,java 数据库连接)是用于执行 SQL 语句的 JavaAPI,可以为多种关系型数据库提供统一的访问 ...

  10. 读取html文件，让其中的内容和notepad打开这个html的样子一样。

    然后我写了个python代码,让其读取这个html文件后,内容和这个一样: htmlf=open('13144815898.html','r',encoding="utf-8") ...