<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. PAT 天梯赛 L1-005. 考试座位号 【MAP标记】

    题目链接 https://www.patest.cn/contests/gplt/L1-005 题意 有一个 考生号,一个试机座位,一个考试座位,给出试机座位,查询 考生号和考试座位 思路 MAP + ...

  2. hadoop19---动态代理

    Action调用service里面的方法,动态代理:改变方法的实现在方法前后加逻辑不是加新方法. 在学习Spring的时候,我们知道Spring主要有两大思想,一个是IoC,另一个就是AOP,对于Io ...

  3. React-native Android环境搭建

    基础安装 安装Homebrew Homebrew是Mac OSX的包管理器,我们需要通过Homebrew安装开发React Native的相关软件包. 如果不知道怎样安装Homebrew可以点这里:官 ...

  4. 《棋牌游戏服务器》斗地主AI设计

    设计目标 要取得良好效果,首先要搞清楚一个问题:我们想得到一个什么样的斗地主AI?我们的AI是用在手游产品当中,在真实玩家不足时为用户提供陪玩服务,这个目标决定了这个AI要具备以下两个核心特点:1.执 ...

  5. react native 中的ReadableMap和WritableMap的使用

    react native跟安卓原生交互的数据类型中,有两个比较陌生的类型,ReadableMap和WritableMap. ReadableMap和WritableMap,顾名思义,反正是map. W ...

  6. 用“倍增法”求最近公共祖先（LCA)

    1.最近公共祖先:对于有根树T的两个结点u.v,最近公共祖先LCA(T,u,v)表示一个结点x,满足x是u.的祖先且x的深度尽可能大. 2.朴素算法:记录下每个节点的父亲,使节点u,v一步一步地向上找 ...

  7. PHP的date函数的时区问题

    来自:http://www.cnblogs.com/fuland/p/4250462.html(“腐烂的翅膀”的博客) 从php5.1.0开始,php.ini里加入了date.timezone这个选项 ...

  8. 初入Spring-boot（二）

    一.入口类 Spring boot通常有一个名为*Application的入口类,入口类里有一个main方法,这个main方法其实就是一个标准的java应用的入口方法.在main方法中使用Spring ...

  9. CocoaPods学习系列4——进阶用法

    这篇文章,记录一下CocoaPods的进阶用法. 进阶用法主要体现在.podspec文件和Podfile的配置上. .podspec文件的进阶配置 以官方的一个.podspec文件示例细说: Pod: ...

  10. GO学习笔记：struct的匿名字段

    我们上面介绍了如何定义一个struct,定义的时候是字段名与其类型一一对应,实际上Go支持只提供类型,而不写字段名的方式,也就是匿名字段,也称为嵌入字段. 当匿名字段是一个struct的时候,那么这个 ...