<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body onload="draw(),drawarc()">

        <!--绘制的步骤：获取canvas元素->取得上下文->填充与绘制边框->设定绘图样式-->

        <!--绘制其他复杂图形需要使用路径：开始创建路径->创建图形路径->关闭路径->绘制图形-->

        <!--eg:绘制矩形-->

        绘制矩形:<canvas id="ca"></canvas><br />

        绘制圆形：<canvas id="yuan"></canvas>

    </body>

</html>

<script>

    //绘制矩形

    function draw(){

        var canvas=document.getElementById('ca'); //获取canvas元素

        if (canvas==null)

           return false;

        var context=canvas.getContext('2d'); //取得上下文

        context.fillStyle='#EEEFF';   //填充颜色

        context.fillRect(0,0,400,300); //填充矩形 (矩形1)

        context.fillStyle='red';

        context.strokeStyle='blue'; //边框颜色

        context.lineWidth=1;        //边框宽度

        context.fillRect(50,50,100,100); //填充矩形（内部矩形2）

        context.strokeRect(50,50,100,100); //绘制边框

    }

    //绘制圆形

   function drawarc(){

    var canvas2=document.getElementById('yuan'); //获取canvas元素

        if (canvas2==null)

    if(canvas2==null)

       return false;

       var context2=canvas2.getContext('2d');  //取得上下文

       context2.fillStyle='#EEEEEF';

       context2.fillRect(0,0,400,300);

       var n=0;

       for(var i=0;i<10;i++){

              context2.beginPath();  //开始创建路径

              context2.arc(i*25,i*25,i*10,0,Math.PI*2,true);  //创建圆形路径

              context2.closePath();  //关闭路径

              context2.fillStyle='Rgba(255,0,0,0.25)'; //设置颜色

              context2.fill();  //填充图形

       }

}

</script>

html5 canvas绘制矩形和圆形的更多相关文章

  1. h5学习-canvas绘制矩形、圆形、文字、动画

    绘制矩形<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  2. Canvas 绘制矩形，圆形，不规则图形（线条），渐变等图像效果

    绘制矩形: getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. fillStyle 方法将其染成红色,fill ...

  3. canvas 绘制矩形和圆形

    canvas绘制有两神方法:1).填充(fill)填充是将图形内部填满. 2).绘制边框 (stroke)绘制边框是不把图形内部填满,只是绘制图形的外框. 当我们在绘制图形的时候,首先要设定好绘制的样 ...

  4. HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  5. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  6. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  7. HTML5—canvas绘制图形（1）

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  8. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

  9. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

随机推荐

  1. Azure SLB + httpd + ILB + HAProxy + Atlas + MySQL

    为了测试一个环境,需要在Azure上搭建高可用的LAMP架构.但要求MySQL的中间件Atlas采用主备的模式.在数据中心一般采用Keepalive+VIP的模式,通过浮动地址对外提供服务. 但在云环 ...

  2. MySQL执行计划的讲解

    最近同事在执行线上执行一条MySQL的查询语句,数据的话在9000条左右,但使用左连接的时候查询速度大概在15秒左右~这速度确实是无法接受的~ 经过简单的修改,变为内连接的话,执行速度不到1秒. 下面 ...

  3. mybatis 学习五 动态SQL语句

    3.1 selectKey 标签 在insert语句中,在Oracle经常使用序列.在MySQL中使用函数来自动生成插入表的主键,而且需要方法能返回这个生成主键.使用myBatis的selectKey ...

  4. 【转】bootstrap模态框（modal)使用remote方法加载数据，只能加载一次的解决办法

    http://blog.csdn.net/coolcaosj/article/details/38369787 bootstrap的modal中,有一个remote选项,可以动态加载页面到modal- ...

  5. ruby on rails 中render的

    Ruby rails页面跳转代码如下: 1.render(:text => string) 2.render(:inline => string, [:type => "r ...

  6. Flash 零日漏洞复现（CVE-2018-4878）

    项目地址:https://github.com/Sch01ar/CVE-2018-4878.git 影响版本为:Adobe Flash Player <= 28.0.0.137 攻击机器IP:1 ...

  7. Struts1使用技巧

    转自:https://blog.csdn.net/chjttony/article/details/6099101 1.Struts1是Apache推出的java web开发领域一个比较早,同时也是使 ...

  8. 在IDEA 中用maven创建web项目

    安装Maven 下载安装 去maven官网下载最新版. 解压到安装目录. 配置 右键桌面的计算机图标,属性–>高级系统设置–>环境变量,添加M2_HOME的环境变量,然后将该变量加入的PA ...

  9. Django的serializers使用

    Serializer 在这里通过一个验证用户身份的例子说明rest_framework中serializer.Serializer的使用. 编写serializer Serializer的使用不需要依 ...

  10. SWT简介

    --------------siwuxie095                         SWT 简介:     SWT(Standard Widget Toolkit) 也是基于一个对等体实 ...