<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. idea 快键件大全

    最常用快捷键1.Ctrl+E,可以显示最近编辑的文件列表2.Shift+Click可以关闭文件3.Ctrl+[或]可以跳到大括号的开头结尾4.Ctrl+Shift+Backspace可以跳转到上次编辑 ...

  2. Mac OS X下搭建Android开发环境(包括SDK和NDK)

    资源准备:  JDK Eclipse Android SDK Android NDK ADT CDT ANT 搭建Android SDK开发环境: 1.JDK安装,要求版本>1.5, Mac O ...

  3. python网络编程——网络IO模型

    1 网络IO模型介绍 服务器端编程经常需要构造高性能的IO模型,常见的IO模型有四种:    (1)同步阻塞IO(Blocking IO):即传统的IO模型.    (2)同步非阻塞IO(Non-bl ...

  4. Python3.x：Linux下安装python3.6

    Python3.x:Linux下安装python3.6 下载 #先进入download文件夹 cd /home/download #输入命令(下载到当前目录) wget https://www.pyt ...

  5. 二叉树、平衡二叉树、B-Tree与B+Tree

    本文总结自:https://blog.csdn.net/chuixue24/article/details/80027689 二叉树(B树,binary tree) 左子树的键值 < 根的键值 ...

  6. 王译潇20162314 实验报告三plus结对编程四则运算第一阶段

    北京电子科技学院BESTI实验报告 课程:程序设计与数据结构 班级: 1623 姓名: 王译潇 学号:20162314 指导教师:娄佳鹏老师.王志强老师 实验日期:2017年5月12号 实验密级: 非 ...

  7. [Android]android Service后台防杀

    网上有很多办法,方法一:在JNI里面fork出子进程service在单独的进程中,在service中调用JNI的代码,然后fork出一个进程,然后让我们的service进程和fork出来的子进程一直运 ...

  8. mysql全库搜索指定字符串

    mysql全库搜索指定字符串 DELIMITER // DROP PROCEDURE IF EXISTS `proc_FindStrInAllDataBase`; # CALL `proc_FindS ...

  9. Map 的 key、value 是否允许为null

    Map的key和value是否允许null? 直接写程序验证一下: import java.util.HashMap; import java.util.Hashtable; import java. ...

  10. tensorflow conv2d的padding解释以及参数解释

    1.padding的方式: 说明: 1.摘录自http://stackoverflow.com/questions/37674306/what-is-the-difference-between-sa ...