（一）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 ...
随机推荐
- springmvc ModelAndView
/** * 目标方法的返回值可以是 ModelAndView 类型. * 其中可以包含视图和模型信息 * SpringMVC 会把 ModelAndView 的 model 中数据放入到 reques ...
- Codeforces Round #395 (Div. 2)B. Timofey and cubes
地址:http://codeforces.com/contest/764/problem/B 题目: B. Timofey and cubes time limit per test 1 second ...
- POJ - 2942 Knights of the Round Table (点双联通分量+二分图判定)
题意:有N个人要参加会议,围圈而坐,需要举手表决,所以每次会议都必须是奇数个人参加.有M对人互相讨厌,他们的座位不能相邻.问有多少人任意一场会议都不能出席. 分析:给出的M条关系是讨厌,将每个人视作点 ...
- 从Redux源码探索最佳实践
前言 Redux 已经历了几个年头,很多 React 技术栈开发者选用它,我也是其中一员.期间看过数次源码,从最开始为了弄清楚某一部分运行方式来解决一些 Bug,到后来看源码解答我的一些假设性疑问,到 ...
- Building an FTP Test Plan
参考:http://jmeter.apache.org/usermanual/build-ftp-test-plan.html 1.创建一个线程组 2.线程组--->添加--->配置元件- ...
- CSS 3 中的多列属性
.column-count <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Cisco交换机设备配置镜像端口
查看交换机端口的基本情况,输入命令 show ip int bri,可以查看端口状态 FastEthernet表示百兆以太网端口,GigabitEthernet表示千兆以太网端口. 进入全局模式 设置 ...
- SpringBoot配置文件 application.properties详解
SpringBoot配置文件 application.properties详解 本文转载:https://www.cnblogs.com/louby/p/8565027.html 阅读过程中若发现 ...
- JavaWeb -- Struts2 验证框架
1. 验证框架 示例 表单提交Jsp, reg.jsp <%@ page language="java" contentType="text/html; chars ...
- ThinkPad.E440_FN键反了
1.一直不知道,为何我的 FN键反了(Fn+F1 才是F1的功能),想改过来.查到是 BIOS中改,但是 BIOS里面没有 那些个修改的选项,于是 还原了BIOS的设置,于是出问题了... 2.问题1 ...