Canvas基础知识积累
2016-07-12 08:21
429 查看
Canvas
创建canvas
<canvas id="canvas"></canvas>
一般都要存在ID
width和height建议直接在
<canvas>中直接设定,不要使用css的方式去设定长和高,并且其是没有px单位的,因其也表示精度
width和height还可以使用JS的方式进行设定,在Element对象中存在width和height属性,可以进行设定
获取Canvas对象
var canvas=document.getElementById("canvas"); var context= canvas.getContext();
context就是canvas对象,接下来都是对其进行操作
设置width和height
canvas.width = 1024; canvas.height = 768;
直线
context.strokeStyle="#005588";//设置颜色,red这种方式也是可以的 context.lineWidth=5;//线宽 context.moveTo(100,100);//表示画笔的起点坐标 context.lineTo(700,700);//表示下一笔的坐标 context.lineTo(1000,700);//表示下一笔的坐标 context.stroke();//绘制线条
多边形
context.fillStyle="rgb(2,100,30)";//颜色 context.moveTo(100,100);//表示画笔的起点坐标 context.lineTo(700,700);//表示下一笔的坐标 context.lineTo(1000,700);//表示下一笔的坐标 context.fill();
context.fillStyle="rgb(2,100,30)";//颜色 context.arc( x , y , RADIUS , 0 , 2*Math.PI,false )//画圆,参数依次:横坐标,纵坐标,半径,画圆起点,画圆终点,是否为顺时针方向画圆 context.fill();
fill()会将颜色填充
开始和结束
context.fillStyle="rgb(2,100,30)";//颜色 context.moveTo(100,100);//表示画笔的起点坐标 context.lineTo(700,700);//表示下一笔的坐标 context.lineTo(1000,700);//表示下一笔的坐标 context.fill();
context.strokeStyle="#005588";//设置颜色,red这种方式也是可以的 context.lineWidth=5;//线宽 context.moveTo(100,100);//表示画笔的起点坐标 context.lineTo(700,700);//表示下一笔的坐标 context.lineTo(1000,700);//表示下一笔的坐标 context.stroke();//绘制线条
这代码显示的结果,其实不是我们想的那样,其实还是存在一些问题,因fill()上方的路径状态还是存在有效的,所以为了解决这个问题,引入了
beginPath()和
closePath()
beginPath():开始路径,表示画笔状态的开始
closePath():结束路径,结束一个路径,如果路径不是封闭的,会将其变为封闭
清除
context.clearRect(0,0,1024, 768);
参数表示清除的坐标范围
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- HTML5调用摄像头实例
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法