<!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. poj 2115 C Looooops——exgcd模板

    题目:http://poj.org/problem?id=2115 exgcd裸题.注意最后各种%b.注意打出正确的exgcd板子.就是别忘了/=g. #include<iostream> ...

  2. Python 设计一个简单的计算器

    设计目标 实现加减乘除及拓号优先级解析 用户输入'1 - 2 * ( (6-3 +(-5/5)*(9-2*3/3 + 7/3*7/4*12 +10 * 5/5 )) - (-4*3)/ (12-3*2 ...

  3. apache配置详解 apache安装路径

    http://www.linuxidc.com/Linux/2015-02/113921.htm 不同apache的安装方式 的安装目录示例 http://www.121down.com/articl ...

  4. 记录启用HTTPS的全过程

    因为 https 采用 ssl 加密,所以部署 https 时需要申请证书,证书的作用就是对浏览器和Web服务器双方的身份验证. 步骤1:申请证书 我们采用Let's Encrypt签发的免费证书,虽 ...

  5. CIA泄露资料分析（黑客工具&技术）—Windows篇

    背景 近期,维基解密曝光了一系列据称来自美国中央情报局(CIA)网络攻击活动的秘密文件,代号为“Vault 7”,被泄露文件的第一部分名为“Year Zero”,共有8761个文件,包含7818个网页 ...

  6. jdbcTemplate学习（三）

    上一节讲的查询方法,映射结果集为对象时,需要一个个set属性值,比较麻烦,下面讲解使用BeanPropertyRowMapper来将查询结果简单映射成对象: 使用Spring的JdbcTemplate ...

  7. DDD学习笔录——领域驱动设计DDD概念总结

  8. leetcode628

    这道题十分不容易啊,做到半夜. class Solution { public: static int cmp628(int a, int b) { return a > b; } static ...

  9. Excel向数据库插入数据（执行一次只需连接一次）-batch简单使用

    由于前端时间向数据库插入excel中的数据时,每插入一条数据,就得连接一次数据库:后来发现这种做法不好,如果excel中有很多条数据,就得连接很多次数据库,这样就很浪费资源而且不安全,有时数据库也会报 ...

  10. nginx配置域名

    其他都一样,就特别说下server块的配置. server { listen 80; server_name www.icweshop.com; # 注意:这里你填写的域名必须在/etc/hosts中 ...