<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>绘制几何图形</title>
</head>
<body>
   <!-- fillRect(float x,float y,float width,float height)填充一个矩形区域
    strokeRect(float x,float y,float width,float height)绘制一个矩形边框-->
    <canvas id="myCanvas" width="400" height="600" style="border:3px dashed #000"></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        //设置填充颜色
        ctx.fillStyle = "#ccc";
        //填充一个矩形
        ctx.fillRect(30, 30, 250, 100);
        ctx.fillStyle = "#f00";
        ctx.fillRect(40, 100, 150, 150);

//设置线条颜色
        ctx.strokeStyle = "#F3B73F";
        //设置线条的宽度
        ctx.lineWidth = 6;
        ctx.strokeRect(30, 200, 100, 100);

ctx.strokeStyle = "#F57284";
        //设置线条链接点的风格
        ctx.lineJoin = "meter";
        ctx.strokeRect(50, 315, 120, 60);

ctx.strokeStyle = "#B19941";
        ctx.lineJoin = "round";
        ctx.strokeRect(50, 400, 120, 60);

ctx.strokeStyle = "#A6AAA9";
        ctx.lineJoin = "bevel";
        ctx.strokeRect(60, 470, 120, 60);
    </script>
</body>
</html>

HTML5绘制几何图形的更多相关文章

  1. HTML5实现绘制几何图形

    HTML5新增了一个<canvas.../>属性.该元素自身并不绘制图形,只是相当于一张空画布.如果开发者需要向<canvas.../>上绘制图形则必须使用JavaScript ...

  2. Html5绘制饼图统计图

    这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...

  3. html5绘制折线图

    html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...

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

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

  5. Cocos2D中使用CCDrawNode绘制几何图形崩溃的解决

    在cocos2D v3.x中已经不能像在v2.x中那样直接调用ccDrawXXX函数来绘制几何图形了. 我们可以使用CCDrawNode或者CCRenderer来绘制图形. 但是官方的Api手册中说的 ...

  6. Win10系列：VC++绘制几何图形2

    新建了Direct2D中的资源后,接下来初始化用于绘制图形的应用窗口.在解决方案资源管理器窗口中右键点击项目图标,在弹出的菜单栏中选中"添加", 并在"添加"的 ...

  7. Win10系列：VC++绘制几何图形1

    本小节主要介绍如何使用Direct2D来绘制几何图形,其中会使用到FillGeometry函数和FillEllipse函数,FillGeometry函数用于填充几何图形的内部区域,而FillEllip ...

  8. 用HTML5绘制的一个星空特效图

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. OpenGL入门学习 课程 (三) 绘制几何图形的一些细节问题

    http://oulehui.blog.163.com/blog/static/79614698201191832753312/ 先回顾一下我们都学习了些什么: 第一课,编写第一个OpenGL程序第二 ...

随机推荐

  1. LOJ10067 构造完全图

    LOJ10067 构造完全图 最小生成树 每次找到最小的边,将边两端的块合并 (我之前想的是什么鬼) #include<cstdio> #include<algorithm> ...

  2. Python3: Windows系统上同时安装Python2和Python3

    Python3: Windows系统上同时安装Python2和Python3 为什么要同时安装Python2和Python3环境呢? 因为一些库只支持Python2或者Python3; 在同一台电脑上 ...

  3. JavaScript 创建动态表格

    JavaScript 创建动态表格 版权声明:未经授权,严禁转载! 案例代码 <div id="data"></div> <script> va ...

  4. linux下使用docker-thunder-xware进行离线下载

    1.环境: lsb_release -a hello@jhello:~$ lsb_release -aNo LSB modules are available.Distributor ID: Ubun ...

  5. 分布式系统一致性协议--2PC,3PC

    分布式系统中最重要的一块,一致性协议,其中就包括了大名鼎鼎的Paxos算法. 2PC与3PC 在分布式系统中,每一个机器节点虽然能够明确知道自己在进行事务操作过程中的结果是成功或是失败,但是却无法直接 ...

  6. sql 题目

    1.自增列 通用: ) from table b where b.sid<a.sid) ,* from table a; ,),* from ... 第二个已经有主键自增列的就不可以用了 还有就 ...

  7. 全球变暖|2018年蓝桥杯B组题解析第九题-fishers

    标题:全球变暖 你有一张某海域NxN像素的照片,"."表示海洋."#"表示陆地,如下所示: ....... .##.... .##.... ....##. .. ...

  8. POJ 2425 A Chess Game（有向图SG函数）题解

    题意:给一个有向图,然后个m颗石头放在图上的几个点上,每次只能移动一步,如果不能移动者败 思路:dfs打表sg函数,然后求异或和 代码: #include<queue> #include& ...

  9. excel依赖的dll

    依赖的先后顺序 stdole.dll office.dll Microsoft.Vbe.Interop.dll Microsoft.Office.Interop.Excel.dll Interop是i ...

  10. Excel中的基本概念

    Excel的相关概念工作薄:由若干个工作表组成,一个工作薄就是一个Excel文件.启动Excel或者新建文档时,Excel建立的缺省工作簿文件名为book1,book2,……其扩展名为xls工作薄内工 ...