<!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. MVC 扩展RadioButtonListFor和CheckBoxListFor

    学习MVC时候前端通常会用到HtmlHelper,使得前端编码简便很多.我们可能会经常用到htmlHelper中一些的EditorFor,LabelFor,ValiationMessageFor, 发 ...

  2. dp练习 2016.2.24

    很经典的一道状压dp(似乎叫做旅行商问题),用f[i][s]表示在到达点i,已经经过的城市用二进制表示为s,于是方程就很简单了: f[i][s] = min { f[j][s ^ (1 << ...

  3. Xcode基本设置系列和Xcode报错解决方案

    1, arc机制中调用非arc文件. Xcode——>Project->Build Phases,将需要非arc文件更改为:"-fno-objc-arc"   ,该参数 ...

  4. 自己写操作系统---bootsector篇

    其实博主本来想在寒假自己写一个OSkernal的,高高兴兴的影印了本<一个操作系统的实现>. 然后又去图书馆借来<30天自制操作系统>和<X86/X64体系探索编程> ...

  5. linux下查找指定后缀的文件

    1.linux下查找指定后缀的文件 例如查找当前目录下的所有后缀名时.c或.h的文件 find  .  -type f -regex  ".*\.\(c\|h\)"

  6. Where is HttpContent.ReadAsAsync?

    It looks like it is an extension method (in System.Net.Http.Formatting): HttpContentExtensions Class ...

  7. LuoguP3183 [HAOI2016]食物链 记忆化搜索

    题目描述 如图所示为某生态系统的食物网示意图,据图回答第1小题现在给你n个物种和m条能量流动关系,求其中的食物链条数.物种的名称为从1到n编号M条能量流动关系形如a1 b1a2 b2a3 b3.... ...

  8. 论文笔记——SQUEEZENET ALEXNET-LEVEL ACCURACY WITH 50X FEWER PARAMETERS AND <0.5MB MODEL SIZE

    论文地址:https://arxiv.org/abs/1602.07360 模型地址:https://github.com/DeepScale/SqueezeNet 1. 论文思想 提出一种新的卷积组 ...

  9. 怎样借助Python爬虫给宝宝起个好名字--python 学习

    每个人一生中都会遇到一件事情,在事情出现之前不会关心,但是事情一旦来临就发现它极其重要,并且需要在很短的时间内做出重大决定,那就是给自己的新生宝宝起个名字. 因为要在孩子出生后两周内起个名字(需要办理 ...

  10. UOJ 171 【WC2016】挑战NPC

    一开始还真没想到是一般图匹配这种模型(毕竟才会的带花树) 把每一个盒子拆成3个,每一个可以放置进它的小球分别向这三个点连边,然后这三个点在连成一个三元环,最终答案就是小球数目-匹配数. 由于是一般图, ...