1、 Canvas:定义画布的大小是style的属性,而定义画布的像素是Canvas的属性
如果设置Style里面的width和height他仅表示canvas元素占文档流的位置,这时候画布的宽度 和高度是默认值,分别是600、300.
注意:设置canvas的宽度的,直接操作canvas的width属性和height属性。如果要放大canvas画布,设置的CSS width和height属性值,比例保持一致,说白了就是等比缩放。
2、 坐标系
坐标原点是左上角,和数学上不大一样
3、 描边和填充
4、 常用方法
4.1、getContext():获取渲染的上下文,说白了就是获取画笔。后面传递参数,固定写“2d”
4.2、moveTo(x,y):移动画笔位置,后面带两个参数。
4.3、lineTo(x,y)画一条直线,参数是线的终点位置。
4.4、stroke()绘制线条
4.5、closepath():关闭路径,回到起始点
4.6、ctx.fill()完成填充操作
4.7、fillStyle:这是属性,设置填充的样式,一般填充颜色就行
4.8、beginPath():方法开始一条路径或者重置当前路径。
4.9context.arc(x,y,r,start,end,direction)绘制一个弧。前面两个参数组成圆心的坐标,第三个参数r半径。第四个参数:start其实的弧度,第五个参数end,结束的弧度,最后一个参数direction,绘制方向,true:逆时针方向,false:顺时针方向,默认值是false。
4.10context。rect(x,y,w,h)绘制矩形,(x,y)是矩形的坐标,w:是宽,h高
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width=500;//画布的宽
canvas.height=500;//画布的高
var context=canvas.getContext("2d");
context.moveTo(100,200);//移动圆点
context.lineTo(100,400);//目标位置
context.lineWidth=10;//目标粗细
context.strokeStyle="red";//画笔的样式
context.stroke();//开始画
};
context.closePath(); ///回到原点,解决封口问题
圆形:
context.arc(250,250,200,0,2*Math.PI,false);
//左边距,上边距,半径,起始角度,目标角度,时针(true)
context.lineWidth=10;//目标粗细
context.strokeStyle="red";//画笔的样式
/* context.fillStyle="red";
context.fill();*/
context.stroke();//开始画