<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. jsp验证正则表达式

    jsp验证正则表达式 下面都是我收集的一些比较常用的正则表达式,因为平常可能在表单验证的时候,用到的比较多.特发出来,让各位朋友共同使用.呵呵. 匹配中文字符的正则表达式: [u4e00-u9fa5] ...

  2. Redis整合Spring实现缓存

    一.Redis介绍 什么是Redis? redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set( ...

  3. sql中1=1和1=0的用处

    where 1=1 where 1=1有什么用?在SQL语言中,写这么一句话就跟没写一样. select * from table1 where 1=1与select * from table1完全没 ...

  4. cmd命令 启动 和关闭sql服务

    (1)在操作系统的任务栏中单击“开始”菜单,选择“运行”命令,在下拉列表框中输入“cmd”命令,单击“确定”按钮. (2)输入如下命令,即可通过SQL Server命令行启动.停止或暂停的服务. SQ ...

  5. pyqt4学习之一：搭建环境和入门

    还在继续写Python小工具,想起之前用Tkinter被坑得半死,决定换个框架写UI,又想顺便了解一下qt,就学习一下pyqt4 搭建环境 win:现在安装包 http://www.riverbank ...

  6. iOS7中彻底隐藏status bar

    用Xcode5开发新游戏,发现在iOS7中按照以前的方法隐藏status bar失效了. 想要彻底隐藏status bar,需要在info.plist中添加新行“View controller-bas ...

  7. Spring_HelloWorld

    目录: 各个类文件: pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="h ...

  8. LeetCode第[29]题(Java)：Divide Two Integers

    题目:两整数相除 难度:Medium 题目内容: Given two integers dividend and divisor, divide two integers without using ...

  9. showdoc.js代码

    //页面加载完就执行 $(function(){ //自动根据url把当前菜单激活 var page_id = GetQueryString('page_id'); //如果中没有指定page_id, ...

  10. Mongodb笔记（三）user && aggregate && mapReduce

    版本:mongodb3.4. User: mongodb使用验证登录:默认不开启,mongod中使用--auth开启:  mongod -port=3000 --auth  : 基本方法: db.cr ...