<!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. jqGrid的搜索框下拉

    当需要在jqGrid的搜索框里配置搜索条件时,如下拉,日期等,代码如下: datePick = function(elem) { jQuery(elem). } colNames : [ " ...

  2. 基于FPGA的OLED真彩色动态图像显示的实现

    源:基于FPGA的OLED真彩色动态图像显示的实现 作为第3代显示器,有机电致发光器件(Organic Light Emitting Diode,OLED)由于其主动发光.响应快.高亮度.全视角.直流 ...

  3. MapReduce 简单的全文搜索

    上一个已经实现了反向索引,那么为什么不尝试下全文搜索呢.例如有了 Hello     file3.txt:1; MapReduce     file3.txt:2;fil1.txt:1;fil2.tx ...

  4. FireBug 调试工具(推荐)

    Firebug是网页浏览器 Mozilla Firefox 下的一款开发类扩展,如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利. 安装如下: 下面是 ...

  5. ucos任务优先级从64到256,任务就绪表的改变

    Ucos在任务调度中经常使用的技术为任务就绪表,在之前的文章中使用的例子是低于64个优先级的任务就绪表查找方法,现在ucos将任务扩展到256优先级之后,任务就绪表的查找也做了一定的修改,今天来讲讲 ...

  6. archlinux初次接触遇到的问题

    arch-chroot /mnt /bin/bash ( 两个地址中间有空格)

  7. UVa 10827 - Maximum sum on a torus

    题目大意:UVa 108 - Maximum Sum的加强版,求最大子矩阵和,不过矩阵是可以循环的,矩阵到结尾时可以循环到开头.开始听纠结的,想着难道要分情况讨论吗?!就去网上搜,看到可以通过补全进行 ...

  8. referrer vs referer

    http request里面是referer 其实是http规范拼写错了,正确的拼写应该是referrer

  9. Html 和 Css 的杂乱总结

    1. input 中可以设置 maxLength 属性,控制输入的文字数量,中英文字节数一样,但是没有验证兼容性 2.客户端中的页面禁止右键,复制等 <body scroll="no& ...

  10. angular2教程

    https://github.com/lewis617/angular2-tutorial