<canvas>元素主要用来图形的绘制，通过脚本来完成（通常时js来实现）；
可以利用其实现图表，游戏等项目的开发。
  • getContext
    • 获取画布的摸板是2d还是3d
  • strokeRect(x,y,w,h);
    • 四个参数： x轴，y轴，宽度，高度
    • 主要用来设置边框，可以理解为border
  • fillRect(x,y,w,h);
    • 四个参数：x轴，y轴，宽度，高度
    • 主要用来设置内容盒子，可以理解为div
注：
  • canvas是h5新增标签，兼容性问题可以卸载canvas标签中来进行处理，
  • 宽度和高度的设置需要写成行内样式
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>canvas</title>

</head>

<style>

body {

background-color: black;

}

#c1 {

background: #fff;

}

</style>

<body>

<!--canvas标签的大小需要写成内敛样式-->

<canvas id="c1" width="400" height="400">兼容处理：在这里的代码是看不见的，不支持canvas的浏览器是可以看到的</canvas>

<script>

var oC = document.getElementById("c1");

var ctx = oC.getContext("2d");

// ctx.fillRect(0,0,100,100);//四个参数下x,y,w,h 默认颜色为黑色

ctx.strokeRect(50,100,100,100);//默认颜色为黑色，默认边框大小1px

</script>

</body>

</html>

（一）canvas简介的更多相关文章

  1. canvas简介

    一.canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆 ...

  2. [Web 前端] VML、SVG、Canvas简介

    1.VML: VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途,VML只是被IE支持. ...

  3. VML、SVG、Canvas简介

    1.VML: VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途,VML只是被IE支持. ...

  4. 简介 jCanvas：当 jQuery遇上HTML5 Canvas

    https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...

  5. 【Unity3d游戏开发】浅谈UGUI中的Canvas以及三种画布渲染模式

    一.Canvas简介 Canvas画布是承载所有UI元素的区域.Canvas实际上是一个游戏对象上绑定了Canvas组件.所有的UI元素都必须是Canvas的自对象.如果场景中没有画布,那么我们创建任 ...

  6. 超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等

    超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...

  7. 通过Canvas及File API缩放并上传图片

    原文地址:Resize an Image Using Canvas, Drag and Drop and the File API 示例地址:Canvas Resize Demo 原文作者:Dr. T ...

  8. 前端笔记之Canvas

    一.Canvas基本使用 Canvas是HTML5的画布,Canvas算是“不务正业”的面向对象大总结,将面向对象玩极致. 算法为王!就是说canvas你不会,但是算法好,不怕写业务,不怕代码量,只要 ...

  9. 【转】HTML CANVAS

    https://blog.csdn.net/u012468376/article/details/73350998 学习HTML5 Canvas这一篇文章就够了 2017年06月16日 20:57:4 ...

随机推荐

  1. Flume1.7.0的安装与使用

    Flume下载后,解压,新增一个配置文件,写入配置即可 我将配置文件写在 conf 下,取名为 flume-conf-spooldir.properties Flume 运行命令: bin/flume ...

  2. Linux curl命令参数详解（6/23）

    linux curl是通过url语法在命令行下上传或下载文件的工具软件,它支持http,https,ftp,ftps,telnet等多种协议,常被用来抓取网页和监控Web服务器状态. 在Linux中c ...

  3. 【笔记】H5自适应（待）

    参考: 1.盒子模型:http://www.cnblogs.com/sunyunh/archive/2012/09/01/2666841.html 2.浮动:http://www.w3school.c ...

  4. Asp.Net Web API 2 官网菜鸟学习系列导航

    链接地址: http://www.cnblogs.com/aehyok/p/3446289.html

  5. Python3.x：获取登录界面校验码图片

    Python3.x:获取登录界面校验码图片 实例代码: # python3 # author lizm # datetime 2018-06-01 18:00:00 # -*- coding: utf ...

  6. Python3,x：如何进行手机APP的数据爬取

    Python3,x:如何进行手机APP的数据爬取 一.简介 平时我们的爬虫多是针对网页的,但是随着手机端APP应用数量的增多,相应的爬取需求也就越来越多,因此手机端APP的数据爬取对于一名爬虫工程师来 ...

  7. 20162326 齐力锋 2017-2018学期 Bag类的补写博客

    要求: 代码运行在命令行中,路径要体现学号信息,IDEA中,伪代码要体现个人学号信息 参见Bag的UML图,用Java继承BagInterface实现泛型类Bag,并对方法进行单元测试(JUnit), ...

  8. JAVA基础补漏--内部类

    成员内部类 public class InnerClass { public static void main(String[] args) { System.out.println("++ ...

  9. Eclipse 启动tomcat 访问主页报错404

    问题 tomcat用startup.sh启动,访问localhost:8080能正常访问,用Eclipse service启动tomcat,访问localhost:8080报错404 解决方法 1. ...

  10. 使用nagios检测windows服务器

    1.安装nagios windows客户端 下载NSClient++的安装包,注意根据实际的32/64CPU来下载 下载地址 http://sourceforge.net/projects/nscpl ...