H5-cnavas画布
来源:互联网 发布:c语言还是p语言好 编辑:程序博客网 时间:2024/06/08 00:47
HTML5 Canvas画布
(1)canvas元素
width和height跟style里面的width和height一样吗?
如果之际设置canvas的width和height:画布和元素的宽度都是你设置的值。
如果设置的style里面的width和height,它仅表示canvas元素占文档流的位置。这时候画布的宽度和高度是默认值。分别是600,300。
注:设置canvas的宽度和高度,直接操作canvas的width和height属性。如果需要放大canvas画布,设置的CSS width和height应该和canvas width、height属性值,比例保持一致,说白了就是等比缩放。
(2)坐标系
坐标系坐标原点是在左上角
(3)描边与填充
(4)常用方法
4.1 getContext():获取渲染的上下文,实际上就是获取画笔。后面传递的蚕食固定写“2d”:
var context = canvas.getContext("2d");
4.2 moveTo(x,y):移动画笔的位置,后面带2个参数:
context.moveTo(100,200);
4.3 lineTo(x,y):画一条线,参数是限的终点位置:
context.lineTo(50,300);
和线条相关的属性:
lineWidth:线条的宽度
strokeStyle:线条的颜色
4.4 stroke();绘制context.stroke(); closePath();关闭路径,也就是回到起始点。
context.closePath();
4.6 fillStyle();这时属性,设置填充的样式,一般填充颜色就可以了。
context.fillStyle = "blue";
4.7 fill();完成填充操作
context.fill();
4.8 beginPath();方法:开始一条路径,或重置当前的路径。
context.beginPath();
4.9 context.arc(x,y,r,start,end,direction)绘制一条弧。前面2个参数组成圆心的坐标;第三个参数r半径;第四个参数:start起始的弧度;第五个参数:end结束的弧度;最后一个参数direction是绘制的方向:true逆时针,默认false是顺时针。
context.arc(200,200,100,0,1/2*Math.PI,true);
4.10 context.rect(x,y,w,h);绘制矩形,x和y是矩形左上角的坐标位置,w是矩形的宽度,h是矩形的高度。
context.rect(100,100,200,100);
了解:贝塞尔曲线
定义画布的大小是style的属性,而定义画布的像素,是canvas特有的width,height属性。
<script> window.onload = function(){ //画布 var canvas = document.getElementById("canvas"); canvas.width = 500; canvas.height = 500; //画笔 var context = canvas.getContext("2d");//目前只有2d这个属性 }</script>
canvas是内联元素。
画第一笔:
context.moveTo(100,200);//移动原点,起始位置context.lineTo(50,300);//目标位置context.lineWidth = 10;//画笔的粗细context.strokeStyle = "red";//画笔的样式context.stroke();//开始画调用前面所有,必须放在最后
画第二笔:
context.beginPath();//开始新的一笔context.moveTo(200,200);context.lineTo(150,300);context.lineTo(200,400);context.lineWidth = 5;context.strokeStyle = "pink";context.stroke();
画圆的方法:context.arc(圆心X,圆心Y,半径,起始角度,目标角度,画的方向[true,false])
context.arc(200,200,100,0,1/2*Math.PI,true);//true逆时针画,默认顺时针
- H5-cnavas画布
- H5画布
- H5画布画表格
- Canvas----h5中的画布
- h5的画布Canvas
- h5中的画布----Canvas
- H5的canvas画布使用
- 利用JS 事件 与 Cnavas绘图 以及 H5 缓存写的一个手势解锁(一)
- 利用JS 事件 与 Cnavas绘图 以及 H5 缓存写的一个手势解锁(二)
- 利用JS 事件 与 Cnavas绘图 以及 H5 缓存写的一个手势解锁(三)
- h5的canvas画布常用方法
- h5 canvas画布、setInterval定时器、addEventListener事件
- #学习笔记#(19)H5画布橡皮擦游戏-JS
- H5网页Canvas画布绘图 图片文字合成
- 带你学习H5画布控件的应用
- 用cnavas绘制五角星
- 画布
- 画布
- Spring Boot中使用Redis数据库
- 网络编程的一些问题
- Android Studio项目将Module依赖(lib)转成jar包
- linux添加删除swap分区文件
- IDEA之Session的活化和钝化
- H5-cnavas画布
- SpringBoot学习之——springboot的各种配置
- GSON
- C++中malloc/free和new/delete的区别---补充(15)《Effective C++》
- Java的枚举类型
- 使用git托管项目
- golang 切片
- Java NIO系列教程(3) :Buffer
- Intellij IDEA调试功能使用总结