（一）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 ...
随机推荐
- 用python实现0到9之间10个数字排列不重复的个数
""" product 笛卡尔积 permutations 排列 combinations 组合,没有重复 combinations_with_replacement ...
- Nginx 301与302配置
说明 1.首先看一个完整代码示例,关于nginx 301 302跳转的. 301跳转设置: server { listen 80; server_name 123.com; rewrite ^/(.* ...
- ASP.NET MVC jQuery 树插件在项目中使用方法（一）
jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...
- 20145109 《Java程序设计》第七周学习总结
20145109 <Java程序设计>第七周学习总结 Chapter 13 Time & Date Date System.currentTimeMillis() return L ...
- Win32 API编程：显示系统进程列表
#include <windows.h> #include <tlhelp32.h> // 声明快照函数的头文件 #include "tchar.h" #i ...
- OpenVpn部署使用easy-rsa-3.0
OpenVpn简介 OpenVPN是一个用于创建虚拟专用网络(Virtual Private Network加密通道的免费开源软件.使用OpenVPN可以方便地在家庭.办公场所.住宿酒店等不同网络访问 ...
- Python 文件操作综合案例
# 案例 # 文件的复制 # 要求 # 将一个文件, 复制到另外一个副本中 # 步骤分析 # 1. # 只读模式, 打开要复制的文件 import os import shutil path = &q ...
- Parameter Binding in ASP.NET Web API
https://docs.microsoft.com/en-us/aspnet/web-api/overview/formats-and-model-binding/parameter-binding ...
- Linux 实用指令之查看端口开启情况
netstat -ntlp 查看端口使用情况! netstat -ntlp | grep 80 查看具体的端口是否使用! # netstat -ntlp Active Internet connect ...
- DPDK-KERNEL NIC INTERFACE（内核NIC接口）
DPDK编程指南(翻译)( 二十一) 21.内核网络接口卡接口 DPDK Kernel NIC Interface(KNI)允许用户空间应用程序访问Linux *控制面. 使用DPDK KNI的好处是 ...