<!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. HUST 1606 Naive

    预处理一下,然后o(1)询问. #include<cstdio> #include<cstring> #include<cmath> #include<str ...

  2. .htaccess 使用大全

    重新和重定向 注意:首先需要服务器安装和启用mod_rewrite模块. 强制 www RewriteEngine on RewriteCond %{HTTP_HOST} ^example\.com ...

  3. 【转】2015年薪酬大涨的15个IT岗位

    近日,国外科技 IT 招聘公司 Robert Half 分析了 70 个科技职位后发现 2015 年从事 IT 从业人员的平均起薪将攀升至 5.7%,其中 15 个职位的提升潜力最大. 当企业在招聘过 ...

  4. Apache Bench安装与使用

    一.Apache Bench简介 ApacheBench 是 Apache 服务器自带的一个web压力测试工具,简称ab.ab又是一个命令行工具,对发起负载的本机要求很低,根据ab命令可以创建很多的并 ...

  5. jquery $提示缺少对象$提示缺少对象

    jquery $提示缺少对象 项目中存在不同版本的jquery,有1.4也有1.2, 之前运行项目不会报错 " $提示缺少对象 ",但是我的IE9重置之后就报错,从网上找了一大堆, ...

  6. java8 泛型声明 The diamond operator ("<>") should be used

    The diamond operator ("<>") should be used Java 7 introduced the diamond operator (& ...

  7. 内网服务器启动报错UNEXPECTED INCONSISTENCY解决方法

    一开始进入系统显示reboot and select proper boot device or insert boot media in selected boot device and press ...

  8. ios framework 开发

    ios framework 开发 之 参考 ios framework 开发 之 实战 iOS workspace 依次编译多个工程

  9. 【蓝牙数据采集模块】-01-Sensor Controller 功能介绍

    一. CC2650芯片内部的结构框图如图,内部包含: 一个Cortex-M3主控制器,用来做整个芯片的功能与任务实现 一个Cortex-M0射频控制器,用来驱动RF相关电路 一个Sensor Cont ...

  10. mybatis 参数为list时，校验list是否为空， mybatis ${}与#{}的区别，Mybatis sql in

    1.mybatis 参数为list时,校验list是否为空 2. mybatis ${}与#{}的区别 简单来说#{} 解析的是占位符?可以防止SQL注入, 比如打印出来的语句 select * fr ...