Canvas基础知识

Canvas

创建canvas

  1. 一般都要存在ID

  2. width和height建议直接在中直接设定,不要使用css的方式去设定长和高,并且其是没有px单位的,因其也表示精度

  3. 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()

  1. beginPath():开始路径,表示画笔状态的开始

  2. closePath():结束路径,结束一个路径,如果路径不是封闭的,会将其变为封闭

清除

context.clearRect(0,0,1024, 768);
参数表示清除的坐标范围

关键字:canvas, html5

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部