<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. 【工具】PC端调试手机端 Html 页面的工具

    一.概述 有一个项目需要在手机端显示一个 web 页面,而每次把应用 launch 后,从手机端看比较麻烦,因此搜罗了几种在 PC 端调试手机端页面的工具. 二.工具 http://fonkie.it ...

  2. $python打包工具pyinstaller的用法

    pyinstaller是一个很好用的python打包工具,在Windows环境下可以将python脚本打包成一个exe可执行文件,并且脚本中所依赖的各种第三方库在打包时候都会被统一处理到一起,这样打包 ...

  3. Windows安装多个Tomcat服务

    1.下载tomcat解压,并复制三份(用压缩版的不要用安装版的) 2.配置环境变量CATALINA_HOME和CATALINA_BASE .改端口 修改文件server.xml,修改3个端口号 < ...

  4. 谁说程序员不懂爱情【Her】

    2014.8.17日 我和我女朋友恋爱两周年的日子.走到今天很不容易,我很珍惜. 就想趁这机会,尽自己能力做一个特别的礼物. 这款应用两周前就开始计划了.也熬了几个晚上.接触wp开发时间不长,第一款应 ...

  5. Nginx 域名跳转

    域名跳转 就是实现URL的跳转和隐藏真实地址,基于Perl语言的正则表达式规范.平时帮助我们实现拟静态,拟目录,域名跳转,防止盗链等 . 域名跳转配置 1.多域名指定一个域名重定向 # 空格分割域名 ...

  6. Python MySQL数据库连接模块

    1. MySQLdb只支持在Python 2版本使用MySQLdb是用于Python链接Mysql数据库的接口.a.pip安装 直接使用pip进行安装,在此之前需要安装一些系统依赖包. ● CentO ...

  7. 外部类与main方法笔记

    外部类 1. 外部public class只能有一个 2. 外部类只能有两种访问控制级别: public 和默认 3. 一个文件中,可以有多个public class,即外部类为public,还可以有 ...

  8. Maven的SSM框架配置文件：

    applicationContext.xml: <?xml version="1.0" encoding="UTF-8"?> <beans x ...

  9. maven说明

    1.maven 仓库地址 http://mvnrepository.com/ 2.maven jar包搜索地址 http://search.maven.org/ 3. 点开上面的 版本链接,就可以看到 ...

  10. Address already in use: make_sock: could not bind to address [::]:80

    **********************************************************处理办法:# ps -aux | grep httpWarning: bad syn ...