（一）canvas简介
- 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简介的更多相关文章
- canvas简介
一.canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆 ...
- [Web 前端] VML、SVG、Canvas简介
1.VML: VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途,VML只是被IE支持. ...
- VML、SVG、Canvas简介
1.VML: VML的全称是Vector Markup Language(矢量可标记语言),矢量的图形,意味着图形可以任意放大缩小而不损失图形的质量,这在制作地图上有很大用途,VML只是被IE支持. ...
- 简介 jCanvas：当 jQuery遇上HTML5 Canvas
https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...
- 【Unity3d游戏开发】浅谈UGUI中的Canvas以及三种画布渲染模式
一.Canvas简介 Canvas画布是承载所有UI元素的区域.Canvas实际上是一个游戏对象上绑定了Canvas组件.所有的UI元素都必须是Canvas的自对象.如果场景中没有画布,那么我们创建任 ...
- 超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等
超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...
- 通过Canvas及File API缩放并上传图片
原文地址:Resize an Image Using Canvas, Drag and Drop and the File API 示例地址:Canvas Resize Demo 原文作者:Dr. T ...
- 前端笔记之Canvas
一.Canvas基本使用 Canvas是HTML5的画布,Canvas算是“不务正业”的面向对象大总结,将面向对象玩极致. 算法为王!就是说canvas你不会,但是算法好,不怕写业务,不怕代码量,只要 ...
- 【转】HTML CANVAS
https://blog.csdn.net/u012468376/article/details/73350998 学习HTML5 Canvas这一篇文章就够了 2017年06月16日 20:57:4 ...
随机推荐
- 从零到一创建ionic移动app：应用anjularjs编写ionic项目
推荐两篇文章,带你入门 ionic中文项目(作为了解ionic基础结构用):http://blog.csdn.net/i348018533/article/details/47258449/ ioni ...
- 笔记-CSS空背景图片会导致页面被加载两次
如果页面样式的背景图片路径设置为'' 或 '#', 会导致页面被重复加载两次 (Chrome.56.0.2924.87 测试) 因为:空图片路径属性值,默认加载当前页面的URL作为图片路径 Safar ...
- web.xml配置之<context-param>详解
读完本文,你将了解(1)<context-param>的作用和用法,(2)<context-param>配置和<init-param>的区别 <context ...
- Spring Data Jpa示例（IntelliJ maven项目）
1. 在IntelliJ中新建maven项目 给出一个建好的示例,(本示例中省略了业务逻辑组件UserService) 2. 在pom.xml中配置依赖 包括: spring-context spri ...
- Java 基础总结(一)
本文参见:http://www.cnblogs.com/dolphin0520/category/361055.html 1. String,StringBuffer,StringBuilder 1) ...
- ocx的容器调试和ie调试
1 容器调试 1.1 F5,选择ActivesX Control Test Containor 1.2 ok--ok,选择工具栏的new control 1.3 在Insert Control内选择你 ...
- menubar下面的选项不可以输入中文
这是一个QT5的bug. 1.不用中文,使用英文: 2.先输入中文,然后在属性Action里面的text里改成中文.
- Linux设置中文语言的一种方式
刚开始接触Linux时,如果对于英语不太好的人来说,看到英语的系统时就有点头晕. 能把Linux系统设置为中文就变得急需了. 有一个最简单的方法就是,在登录时,下面就有一个选择语言的选项. 如图:
- 文件与IO-字节输入/输出
package IoDemo; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExce ...
- 机器学习三剑客之Pandas
pandas Pandas是基于Numpy开发出的,专门用于数据分析的开源Python库 Pandas的两大核心数据结构 Series(一维数据) Series 创建Series的方法 ...