<!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. codeforces #309 DIV2

    这场并没有做,做的赛后的,太晚了时间,中午做了两题,稍微贴一下,剩余的题目本周争取补完 A题: 链接:http://codeforces.com/contest/554/problem/A #incl ...

  2. Nginx + Apache 反向代理

    反向代理负载均衡 使用代理服务器可以将请求转发给内部的Web服务器,使用这种加速模式显然可以提升静态网页的访问速度.因此也可以考虑使用这种技术,让代理服务器将请求均匀转发给多台内部Web服务器之一上, ...

  3. (简单) HDU 3308 LCIS，线段树+区间合并。

    Problem Description Given n integers. You have two operations: U A B: replace the Ath number by B. ( ...

  4. 用简单的http抓包来实现微信公众网页如何模拟登录

    一.准备工具: 系统:XP 浏览器:IE8 抓包工具:HttpWatch(它可以查看url请求的数据包) 二.抓包思路: 浏览器上的任何获取数据的方式都符合http协议的请求,只要发送符合要求的数据就 ...

  5. Mybatis学习（6）动态加载、一二级缓存

    一.动态加载: resultMap可以实现高级映射(使用association.collection实现一对一及一对多映射),association.collection具备延迟加载功能. 需求: 如 ...

  6. System.Web.UI.WebControls的Web服务器控件

    calendar[英][ˈkælɪndə(r)][美][ˈkæləndɚ]n.日历; 历法; 日程表; (一年之中的)重大事件(或重要日期)一览表; vt.把…记入日程表中; 把…列入表中; 为(文件 ...

  7. POST请求中参数以form data和request payload形式+清空数组方式

    测试与服务端ajax时用的dva封装的request方法,而后端怎么也拿不到参数.结果返现参数在request payload里. HTTP POST表单请求提交时:Content-Typeappli ...

  8. drag file upload xhr 拖拽异步上传文件

    <div id="droptarget" style="width: 500px; height: 200px; background: silver"& ...

  9. Aptana插件安装、配置

    本文讲解在线安装的方式: 1.eclipse->help->Install New SoftWare... 在弹出的对话框Work with中填入[http://download.apta ...

  10. 9 Python+Selenium鼠标事件

    [环境信息] python3.6+Selenium3.0.2+Firefox50.0+win7 [ActionChains类鼠标事件的常用方法] 1.右击:context_click() 2.双击:d ...