<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <h3>什么是canvas？</h3>

    <p>canvas是在html5中的一个重要元素，专门用来绘制图形。</p>

    <h4>画布的创建方法：指定id、width、height</h4>

    <h4>取得上下文：getContext("2d")</h4>

    <h4>绘制图形的方法：fillstyle填充、storkestyle边框</h4>

    <canvas id="canvas" width="500" height="350"></canvas>

    <script>

        var canvas_id = document.getElementById('canvas');

        var content = canvas_id.getContext('2d');

        content.fillStyle = "#000";  //背景颜色 设置或返回用于填充绘画的颜色、渐变或模式

        content.strokeStyle = "#f60"; //边框颜色 设置或返回用于笔触的颜色、渐变或模式

        content.lineWidth = 5;  //边框宽度  设置或返回当前的线条宽度

        content.fillRect(0,0,500,350); //最外层       绘制“被填充”的矩形

        content.strokeRect(50,50,100,200);//里层  绘制矩形（无填充）

        content.strokeRect(100,100,100,200);//里层  绘制矩形（无填充）

    </script>

</body>

</html>

html5_canvas初学的更多相关文章

  1. DDD初学指南

    去年就打算总结一下,结果新换的工作特别忙,就迟迟没有认真动手.主要内容是很多初学DDD甚至于学习很长时间的同学没有弄明白DDD是什么,适合什么情况.这世界上没有银弹,抛开了适合的场景孤立的去研究DDD ...

  2. gulp初学

    原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...

  3. 初学seaJs模块化开发，利用grunt打包，减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  4. 初学Vue2.0--基础篇

    概述: 鉴于本人初学,使用的编译器是webStorm,需添加对VUE的支持,添加方法可以参考 http://www.jianshu.com/p/142dae4f8b51. 起步: 1. 扎实的 Jav ...

  5. 初学Python

    初学Python 1.Python初识 life is short you need python--龟叔名言 Python是一种简洁优美语法接近自然语言的一种全栈开发语言,由"龟叔&quo ...

  6. Javascript初学篇章_5(对象)

    对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象, ...

  7. 初学Objective-C语言需要了解的星星点点

             其实大多数开发初学者都有一些相同的特点,可以说是一种“职业病”.Most有其他平台开发基础的初学者,看到Xcode就想摩拳擦掌:看到Interface Builder就想跃跃欲试:而 ...

  8. matlab初学之句柄

    文章出处:http://www.cnblogs.com/CBDoctor/archive/2012/04/06/2434072.html 在matlab中,每一个对象都有一个数字来标识,叫做句柄.当每 ...

  9. 初学HTML5、初入前端

    学习HTML5是一个漫长的过程,当中会遇到很多技术与心态上的变化.刚开始学习,我们不能发力过猛,需要一个相对稳定的状态去面对.多关注一些自己感兴趣的网站和技术知识,建立自己的信心与好奇心,为以后的学习 ...

随机推荐

  1. iOS开发——关于开发者账号引发的血案

    这里不介绍怎么申请开发者账号,那个网上的教程太多了.这里讲点有意思的. 如果你们公司比较,怎么说呢,呵呵?管理层不懂开发,不管事,申请开发者账号的人员又比较小白,或者别有用心,用私人邮箱来申请,申请的 ...

  2. jsp发布后应用根目录

    1.发布到tomcat后获取应用的根目录 ServletContext s1=this.getServletContext(); String temp=s1.getRealPath("/& ...

  3. html小知识

    button标签如果不设置type,默认是submit,会自动提交表单 input type=file, 添加multiple属性后可以同时选择多个文件,同时name设置接受一个数组 <inpu ...

  4. BZOJ2064: 分裂

    2064: 分裂 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 360  Solved: 220[Submit][Status][Discuss] De ...

  5. sqlserver merge into

    create table #ttt(id int,name nvarchar(10));merge into #ttt t using (select 1 as id ,'eee' as name ) ...

  6. java细节，细的你想象不到

    一. 构造方法每次都是构造出新的对象,不存在多个线程同时读写同一对象中的属性的问题,所以不需要同步 . 如果父类中的某个方法使用了 synchronized关键字,而子类中也覆盖了这个方法,默认情况下 ...

  7. UVa 10720 - Graph Construction

    题目大意:给n个整数, 分别代表图中n个顶点的度,判断是否能构成一张图. 看到这个题后,除了所有数之和应该为偶数之外,没有别的想法了,只好在网上搜解题报告了.然后了解了Havel-Hakimi定理.之 ...

  8. Angular - - $compile编译服务与指令

    $compile 这是个编译服务.编译一段HTML字符串或者DOM的模板, 产生一个将scope和模板连接到一起的函数. 编译服务主要是为指令编译DOM元素,下面的一大段也是主要介绍指令的. 下面是一 ...

  9. hdu-3790-最短路径问题(dijkstra算法)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3790 这题cin会超时i 关于解决cin超时的问题 在main函数开头加上 ios::sync_wit ...

  10. 基于监听的事件处理——Activity本身作为事件监听器

    这种形式使用Activity本身作为监听器类,可以直接在Activity类中定义事件处理方法,这种形式非常简洁.但这种做法有两个缺点: 这种形式可能造成程序结构混乱,Activity的主要职责应该是完 ...