代码如下：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>佛教万字</title>
    </head>

     <body onload="draw()">
        <canvas id="myCanvus" width="250px" height="250px" style="border:0px dashed black;">
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
    function draw(){
        var canvas=document.getElementById("myCanvus");
        var context=canvas.getContext("2d");

        context.fillStyle = "red";
        context.fillRect(0, 0, 250, 250);

        context.fillStyle = "black";// 填充黑色
        context.fillRect(0, 0, 50, 150);// 填充矩形，参数分别为横坐标，纵坐标，宽高
        context.fillRect(50, 100, 200, 50);
        context.fillRect(200, 150, 50, 100);

        context.fillRect(100, 0, 150, 50);
        context.fillRect(100, 50, 50, 200);
        context.fillRect(0, 200, 100, 50);

        context.strokeStyle = "yellow";// 描边黄色
        context.strokeRect(50, 0, 50, 100);// 描边，参数分别为横坐标，纵坐标，宽高
        context.strokeRect(150, 50, 100, 50);
        context.strokeRect(0, 150, 100, 50);
        context.strokeRect(150, 150, 50, 100);
        context.strokeRect(0, 0, 250, 250);
    }
//-->
</script>

HTML5 Canvas 绘制佛教万字的更多相关文章

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

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

  2. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  3. 使用html5 canvas绘制图片

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

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

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

  5. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  6. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  7. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  8. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

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

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

随机推荐

  1. jdk -version could not open jvm.cfg 的解决办法

    java 时出现 could not open jvm.cfg 的解决办法     问题描述: 重装JDK并更变目录后,出现JAVA -VERSION  出现could not open jvm.cf ...

  2. astyle使用基础教程

    astyle使用基础教程 转自: http://babybandf.blog.163.com/blog/static/61993532010112205811797/ astyle是一个我自己常用的开 ...

  3. Linux中Source的用法

    source命令:source命令的功能:使Shell读入指定的Shell程序文件并依次执行文件中的所有语句source命令通常用于重新执行刚修改的初始化文件,使之立即生效,而不必注销并重新登录.用法 ...

  4. [LOJ#2328]「清华集训 2017」避难所

    [LOJ#2328]「清华集训 2017」避难所 试题描述 "B君啊,你当年的伙伴都不在北京了,为什么你还在北京呢?" "大概是因为出了一些事故吧,否则这道题就不叫避难所 ...

  5. [usaco jan 09] 气象牛 baric [dp]

    题面: 传送门 思路: 题意有点绕,实际上就是给你一个计算规则,让你取最少的元素,通过这个计算方式,得到一个小于指定误差上限的结果 这个规则分为三个部分,这里分别用pre,sum,suf表示 因为给定 ...

  6. Codeforces Round #363 (Div. 2) C dp或贪心 两种方法

    Description Vasya has n days of vacations! So he decided to improve his IT skills and do sport. Vasy ...

  7. StringTokenizer：字符串分隔用法简介

    StringTokenizer:字符串分隔解析类型 属于:java.util包. 1.构造函数. 1. StringTokenizer(String str) :构造一个用来解析str的StringT ...

  8. PE笔记之NT头PE签名

    typedef struct _IMAGE_NT_HEADERS {       DWORD Signature;                     //PE头签名PE\0\0       IM ...

  9. paramiko模块及ssh远程登陆

    ssh实现远程登陆一般有两种方式,一种就是用户密码登陆,另一种是密钥登陆(当然默认是要服务端打开ssh服务). 我这里使用这两种方法操作一下远程登陆,测试客户端是本机的root与jeff用户,远程连接 ...

  10. Scrapy学习-24-集成elasticsearch

    elasticsearch简单集成到scrapy中 使用elasticsearch的python接口处理数据  https://github.com/elastic/elasticsearch-dsl ...