一：

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. Apache系列：Centos7.2下安装与配置apache

    Centos7.2下安装与配置apache(一) 配置机:腾讯云服务器,centos7.2 一.安装Apache服务(Apache软件安装包叫httpd) yum install httpd -y 二 ...

  2. hdu3944

    hdu3944题目中给出的杨辉三角形的形状带有误导目的,应该转化成对称的形状再去思考这个问题分两种情况第一个是在左区从目标位置向左上方走一直走到边界,然后再向右上方一直走到起点n-k个1加上C(n-k ...

  3. 团队协作统一vue代码风格，vscode做vue项目时的一些配置

    1. 安装Vetur 扩展 主要是用于让vscode能识别vue文件,对vue代码进行高丽处理,并且它内置了一些代码格式化的设置 2. 安装ESLint 如果你的项目已经开启了eslint规范, 再有 ...

  4. C# LnkHelper

    using System; using System.Collections.Generic; using System.Text; using Microsoft.Win32; using Syst ...

  5. DRF 权限 频率

    DRF的权限 权限是什么 大家之前都应该听过权限~那么我们权限到底是做什么用的呢~~ 大家都有博客~或者去一些论坛~一定知道管理员这个角色~ 比如我们申请博客的时候~一定要向管理员申请~也就是说管理员 ...

  6. vs2010黑色主题Dark完美设置

    版权声明:本文为博主原创文章,未经博主允许不得转载.   ----------------------------------------------------------------------- ...

  7. C# 结合html5 批量上传文件和图片预览

    html5 新特性 <input id="imgsf" type="file" name="imgsf" multiple /> ...

  8. centos7下使用yum安装pip

    centos7下使用yum安装pip 首先安装epel扩展源: yum -y install epel-release 更新完成之后,就可安装pip: yum -y install python-pi ...

  9. IAR map 文件报告与Flash 大小关系

  10. 03爬虫 爬取hfutxc成绩

    #-*- coding:utf-8 -*- # -*- coding: utf-8 -*- #encoding:utf-8 import urllib import urllib2 import co ...