canvas笔记

1，canvas画布有一个默认的宽高300x150,设置canvas画布的宽高有三种方法，一种是css，一种是html，一种是js动态生成

javascript笔记。

html笔记。

<canvas id="wrapper" width="400" height="400"></canvas>
复制代码

 CSS 来设置宽高的话，画布就会按照 300 * 150 的比例进行缩放，也就是将 300 * 150 的页面显示在 400 * 400 的容器中。尽量避免用css直接绘制画布的width和height。canvas是

display:inline-block元素，居中样式对齐需要转成块级元素复制代码

2，canvas本身没有绘图的能力，需要用js进行内部绘制

var canvas = document.getElementById("wrapper"); // 首先创建找到画布
var context = canvas.getContext('2d'); // 创建ctx对象
var cx = canvas.width = 400; // 指定宽
var cy = canvas.height = 400;// 指定高
// 绘制矩形
context.fillStyle = '#FF0000';
context.fillRect(50,50,150,75);
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。canvas画布是一个二维坐标，默认左上角为（0,0）;context.fillRect(50,50,150,75);复制代码