<canvas>新元素

<canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

　　注意: 默认情况下 <canvas> 元素没有边框和内容。

　　画方

<!--fillStyle是填充样式，如果不设置fillStyle属性，默认填充色为黑色，fillRect是画一个矩形，参数为X,Y,Width,Height-->

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" name="author" content="赵慧娟">

        <title></title>

        <script src="Scripts/jquery-1.10.2.js"></script>

        <script type="text/javascript">

            $(function(){

                var canvas=document.getElementById("myCanvas")

                var ctx=canvas.getContext("2d");

                ctx.fillStyle="deeppink";

                ctx.fillRect(10,10,100,100);
　　　　　　　　  //ctx.moveTo(0,0);　　　　//定义开始坐标
　　　　　　　　　//ctx.lineTo(100,100);　　//定义结束坐标
　　　　　　　　　//ctx.stroke();　　　　　　//绘制线条
            })

        </script>

    </head>

    <body>

        <canvas id="myCanvas" width="100" height="100"></canvas>

    </body>

</html>

运行结果：

　　画圆

<!--arc画圆，参数是X,Y,半径，起始角，结束角，顺时针/逆时针(可选)XY指的是圆点的距离-->

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" name="author" content="赵慧娟">

        <title></title>

        <script src="Scripts/jquery-1.10.2.js"></script>

        <script type="text/javascript">

            $(function(){

                var canvas=document.getElementById("myCanvas")

                var ctx=canvas.getContext("2d");

                ctx.fillStyle="deeppink";

                ctx.arc(50,50,50,0,2*Math.PI);

                ctx.stroke();
　　　　　　　　　//ctx.fillText("Hello World",,);　　//绘制实心字体
　　　　　　　　　//ctx.strokeText("Hello World",10,50);　//绘制空心字体

            })

        </script>

        <style type="text/css">

            canvas{

                border: 1px solid #000;

            }

        </style>

    </head>

    <body>

        <canvas id="myCanvas" width="100" height="100"></canvas>

    </body>

</html>

运行结果：

　　渐变

　　createLinearGradient(x,y,x1,y1) - 创建线条渐变

　　createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

// 创建渐变

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"blue");

// 填充渐变

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

运行结果：

　　径向/圆渐变

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

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

// 创建渐变

var grd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// 填充渐变

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

运行结果：

图像

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" name="author" content="赵慧娟">

        <title></title>

        <script src="Scripts/jquery-1.10.2.js"></script>

        <style type="text/css">

            canvas{

                border: 1px solid #000;

            }

            #flower{

                border: 1px solid #000;

                width: 100px;

                height: 100px;

            }

        </style>

    </head>

    <body>

        <img src="img/a.ico" id="flower" />

        <canvas id="myCanvas" width="100" height="100"></canvas>

        <script type="text/javascript">

            $(function(){

                var canvas=document.getElementById("myCanvas")

                var ctx=canvas.getContext("2d");var img=document.getElementById("flower");

                img.onload=function(){

                    ctx.drawImage(img,20,20,80,80);　　//drawImage（对象，X,Y，W,H）

                }

            })

        </script>

    </body>

</html>

运行结果：

（右图为canvas图像）

HTML5-canvas-基础篇的更多相关文章

  1. 《HTML5 CANVAS基础教程》读书笔记

    一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

  2. HTML5 <canvas> 基础学习

    HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形 创建一个画布( ...

  3. HTML5 Canvas基础知识

    HTML5画布 1.创建一个画布         <canvas id="myCanvas" width="200" height="100&q ...

  4. HTML5画布(基础篇11-10)

    <script type="text/javascript"> $(function(){ var s = $("#myCanvas")[0]; v ...

  5. HTML5 Canvas——基础入门

    认识canvas html5的新标签 <canvas>标签只是图像容器,必须使用js来绘制图形 可以通过多种方法使用canvas绘制路径,盒,圆,字符以及添加图像 canvas画布 < ...

  6. html5 canvas基础10点

    本文主要讲解下一些canvas的基础 1.<canvas id="canvas">若此浏览器不支持canvas会显示该文字</canvas> //创建个ht ...

  7. canvas 基础知识整理（二）

    html部分: <canvas id="myCanvas" width="800" height="800" ></can ...

  8. canvas 基础知识整理（一）

    canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...

  9. Chart.js – 效果精美的 HTML5 Canvas 图表库

    Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区).而且,这是 ...

  10. HTML5 Canvas（画布）实战编程初级篇：基本介绍和基础画布元素

    欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制 ...

随机推荐

  1. 搭建SpringBoot+dubbo+zookeeper+maven框架（四）

    今天我们完成框架的thymeleaf模板显示页面功能,页面的用户登陆,密码的AES加密解密,输错3次进行验证码验证功能,东西可能比较多,这个是我这两天在网上结合各种资源整合出来的,基本功能都已经实现, ...

  2. 【php增删改查实例】第二十四节 - 文件上传在项目中的具体应用

    文件上传在项目中,一般有两个用武之地,分别为设置用户的头像和上传附件.本节我们演示如果进行用户头像的上传. 因为一个用户单独并且唯一对应了一个头像,是一对一的关系,所以我们需要去给tm_users表添 ...

  3. Service启动，绑定与交互

    1. Service的启动方式有startServcie和bindService两种. startService时,会经历onCreate—onStartCommand—onDestroy生命周期, ...

  4. ajax请求基于restFul的WebApi(post、get、delete、put)

    近日逛招聘软件,看到部分企业都要求会编写.请求restFul的webapi.正巧这段时间较为清闲,于是乎打开vs准备开撸. 1.何为restFul? restFul是符合rest架构风格的网络API接 ...

  5. 面试 12：玩转 Java 快速排序

    终于轮到我们排序算法中的王牌登场了. 快速排序由于排序效率在同为 O(nlogn) 的几种排序方法中效率最高,因此经常被采用.再加上快速排序思想——分治法也确实非常实用,所以 在各大厂的面试习题中,快 ...

  6. iOS开发简记（9）：APPStore审核

    "觅知音"这个APP的第一个版本从提交审核到上架,历时三个星期,其中遇到一些审核上的问题,它的处理或许能帮助到遇到同样问题的小伙伴们,所以这里列举出来,这三个星期如何跟苹果的审核团 ...

  7. Java类的加载及实例的创建

    java中class.forName()和classLoader都可用来对类进行加载.class.forName()前者除了将类的.class文件加载到jvm中之外,还会对类进行解释,执行类中的sta ...

  8. 朱晔和你聊Spring系列S1E8：凑活着用的Spring Cloud（含一个实际业务贯穿所有组件的完整例子）

    本文会以一个简单而完整的业务来阐述Spring Cloud Finchley.RELEASE版本常用组件的使用.如下图所示,本文会覆盖的组件有: Spring Cloud Netflix Zuul网关 ...

  9. 第八次oo作业

    作业五 作业五是当前最后一次电梯作业,也是我们第一次接触到多线程编程,输入方式也由之前的一次性输入变为了实时输入,其中涉及到大量的同步和冲突,其中学习多线程的使用也花了大量的时间,但总的来说为以后的作 ...

  10. Python文本处理

    文本处理 (一)对文本操作的流程: 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 open(file, mode='r', buffering=None, encoding ...