一：

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. python编码问题在此终结

     转载:https://www.cnblogs.com/whatisfantasy/p/6422028.html 1 版本差异概览 1.1 Python 2.X: str(用于8位文本和二进制数据) ...

  2. 多媒体开发（7）：编译Android与iOS平台的FFmpeg

    编译FFmpeg,一个古老的话题,但小程还是介绍一遍,就当记录.之前介绍怎么给视频添加水印时,就已经提到FFmpeg的编译,并且在编译时指定了滤镜的功能. 但是,在手机盛行的时代,读者可能更需要的是能 ...

  3. 潭州课堂25班：Ph201805201 django 项目 第十三课 短信验证码后台的实现 (课堂笔记）

    d 发送短信验证码之前,后台要得到三个参数 : 1,用户手机吗,, 2,用户输入的图片验证文本, 3,前台的 uuid , 在60秒内是否有发送短信的记录 只有用户输入的手机号,文本信息与 uudi ...

  4. Django复习1

    django常用命令:http://www.cnblogs.com/ldq1996/p/7731930.html Django查询SQL语句: http://www.cnblogs.com/ldq19 ...

  5. [OPENCV]cvHoughLines2使用说明

    1.cvHoughLines2函数定义: CvSeq *cvHoughLines2 { CvArr *image, void *line_storage, int method, double rho ...

  6. BZOJ3565 : [SHOI2014]超能粒子炮

    若$a\leq 1000$,则整个$f$数列会形成$O(a)$段公差为$a$的等差数列. 否则$a^{-1}\leq 1000$,设$ai+b=f(i)$,那么有$i=a^{-1}f(i)-ba^{- ...

  7. 转：2016年崛起的js项目

    近几年 JS 社区创新和演化的速度是有目共睹的,几个月前比较时髦的技术很可能现在已经过时了. 2016 已经过去,你有没有担心错过了什么重要的内容?在这篇调查报告中我们会为你解读社区的主流趋势. 我们 ...

  8. Kafka中时间轮分析与Java实现

    在Kafka中应用了大量的延迟操作但在Kafka中 并没用使用JDK自带的Timer或是DelayQueue用于延迟操作,而是使用自己开发的DelayedOperationPurgatory组件用于管 ...

  9. Vue（十八）Element UI

    Elment UI 1. 简介 Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率 ElementUI PC端 MintUI 移动端 [官网](http ...

  10. Sqoop导入到hdfs

    1.注意win下直接复制进linux 改一下--等 sqoop-list-databases --connect jdbc:mysql://122.206.79.212:3306/ --usernam ...