一：

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. 在ArchLinux中安装MySQL

    最近前端学习用到数据库的知识.鉴于MySQL被甲骨文收购的情况,我从MariaDB开始学习.操作系统Manjaro 17.1, 数据库版本MariaDB 10.1. 1. 安装MariaDb和其客户端 ...

  2. 其实我们可以少写点if else和switch

    前言 作为搬砖在第一线的底层工人,业务场景从来是没有做不到只有想不到的复杂. 不过他强任他强,if-else全搞定,搬就完了.但是随着业务迭代或者项目交接,自己在看自己或者别人的if代码的时候,心情就 ...

  3. RFC2616-HTTP1.1-Status Code(状态码规定部分—译文)

    part of Hypertext Transfer Protocol -- HTTP/1.1 RFC 2616 Fielding, et al. 10 状态码规定(Status Code Defin ...

  4. Area POJ - 1265 -皮克定理-叉积

    Area POJ - 1265 皮克定理是指一个计算点阵中顶点在格点上的多边形面积公式,该公式可以表示为2S=2a+b-2, 其中a表示多边形内部的点数,b表示多边形边界上的点数,S表示多边形的面积. ...

  5. 8. Rotate String

    8. Rotate String Description Given a string and an offset, rotate string by offset. (rotate from lef ...

  6. excel 删除重复项

    excel 删除重复项 单击“数据”按钮会出现如图所示,这时我们可以看到,在下分的菜单栏里有一个“删除重复项”选项,单击该选项.

  7. .ftl文件介绍

    freemarker的文件一般以后缀ftl,ftl文件的头上要写<#assign ww=JspTaglibs["/WEB-INF/webwork.tld"] /这样才能在ft ...

  8. BZOJ3531[Sdoi2014]旅行——树链剖分+线段树

    题目描述 S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教,如飞天面条神教.隐形独角兽教.绝地教都是常见的信仰.为了方便,我们 ...

  9. Java中Date， Calendar， SimpleDateFormat的相互转换

    import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; impor ...

  10. PAT Basic 1020

    1020 月饼 (25 分) 月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不同风味的月饼.现给定所有种类月饼的库存量.总售价.以及市场的最大需求量,请你计算可以获得的最大收益是多少. 注意 ...