<!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. Android高斯模糊技术，实现毛玻璃效果（转）

    本博客转自郭霖公众号:http://mp.weixin.qq.com/s?__biz=MzA5MzI3NjE2MA==&mid=2650235930&idx=1&sn=e328 ...

  2. [转]SQL Server® 2008 R2 Express 静默安装

    1. http://msdn.itellyou.cn/下载Express版SQL Server 2.快捷键win+R,进入CMD,解压文件,解压命令为 <文件名>.exe /x <解 ...

  3. UWP_小说在线阅读器：功能要求与技术要求

    学了WP开发也有一年了,也没做过什么软件的.17年进发UWP,锻炼自己一下.做一个开源的小说阅读器吧. 既然开发一个软件.所以要设计一下吧. 功能要求: 可能要用到的技术,这个吗,这就是遇到问题在解决 ...

  4. Android与JNI(一) ---- Java调用C 静态调用

    第一.通过eclipse新建一个工程名为HelloJni的android工程,并编译. 第二.右键工程-->Android Tools --> Add Native Support,出现如 ...

  5. java web面试

    1. session和cookie的区别和联系,session的生命周期,多个服务部署时session管理. 原博http://blog.csdn.net/shuaishenkkk/article/d ...

  6. EALayout 实践

    步骤: 1. 导入framework 1.0. 下载网址 1.1. 修改Build Setting -> other linker flags,添加 “-ObjC”(连接实现文件)和" ...

  7. Leetcode 181. Employees Earning More Than Their Managers

    The Employee table holds all employees including their managers. Every employee has an Id, and there ...

  8. PHP导出MYSQL数据库并压缩

    PHP可以一键导出MYSQL备份文件,并压缩存放,尽管phpMyAdmin有这功能,不过若你自己开发网站或者是为别人写CMS,你不应该要求别人用你程序的时候再去另外用phpMyAdmin备份MYSQL ...

  9. HTTP协议缓存策略深入详解之ETAG妙用

    Etag是什么: Etag 是URL的Entity Tag,用于标示URL对象是否改变,区分不同语言和Session等等.具体内部含义是使服务器控制的,就像Cookie那样. HTTP协议规格说明定义 ...

  10. 建立、配置和使用Activity——启动、关闭Activity

    一个Android应用通常都会包含多个Activity,但只有一个Activity会作为程序的入口——当该Android应用运行时将会自启动并执行该Activity.至于应用中的其他Activity, ...