canvas(画布)是html5出现的新标签,像所有的dom对象一样,它也有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图。
学canvas相当于是将PS中画图变成用代码来画。
canvas能做的事情有:绘制形状、开发游戏、合成图片、签字。。。
canvas只是一个画布,剩下的工作需要使用JS来完成。
canvas基础
学一个标签,其实是学的是一个对象。叫做canvas对象。
canvas(画布)是html5出现的新标签,像所有的dom对象一样,它也有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图。
学canvas相当于是将PS中画图变成用代码来画。
回顾PS中如何画图:
- 新建画布
- 准备画笔(工具)
- 画点什么
- 上色:填充、描边等
canvas画图的步骤跟PS一样,只是用代码实现而已。
canvas能做的事情有:绘制形状、开发游戏、合成图片、签字。。。
canvas只是一个画布,剩下的工作需要使用JS来完成。
一、新建画布
<canvas id="ca" width="454" height="350">亲爱的,您的浏览器不支持canvas,请升级浏览器后再来</canvas>
<!--默认的宽度是300*150
注意事项:宽高不能写%,写了会把它当做固定单位来看待-->
二、准备画笔(工具)—js的事了
canvas只有一只2d画笔,所有的形状都通过该画笔来实现。
//获取canvas对象
//每写一个canvas标签,就相当于是生成了一个canvas对象
var ca=document.getElementById("ca");
//
//生成一只2D笔,该笔是canvas对象下的一个方法
var pen=ca.getContext('2d');
三、画点什么–学习pen的方法和属性了
可以画的东西有:
-
矩形(正方形+长方形)
a. 空心矩形
pen.strokeRect(x,y,w,h);
b. 实心矩形
pen.fillRect(x,y,w,h);
c.透明矩形—清除矩形–超实用
pen.clearRect(x,y,w,h); //作用: 1、做异形形状,比如 2、刷新画布,清空画布()
-
路径
通过路径可以绘制任何的形状,包括上面的矩形。是一个万能的画形状的方式。注意事项:路径需要描边或填充才能看到。
在画路径之前,先使用
pen.beginPath()
画完后,可以使用
pen.closePath()
来结束,如果路径本身就是闭合了的,则该方法什么也不做。
a. 直线、三角形、菱形等
需要使用起点、第二个点、再连线实现(锚点连线)
//起点 pen.moveTo(x,y) 比如: pen.moveTo(10,10); //第二个点起(包括终点和中间点) pen.lineTo(x,y); //描边 pen.stroke();
b. 圆、圆弧、半圆
//语法: pen.arc(x, y,半径, 开始弧度,结束弧度, anticlockwise) //参数说明: 0. x,y是圆心的位置 1.anticlockwise 是否是逆时针:值为true时逆时针,false为顺时针[默认值] 2.角度与弧度的js表达式: 角度=弧度*180/Math.PI 弧度=角度*Math.PI/180 也就是2π弧度=360度 1弧度?多少度 1弧度==约57.32度 1度==?弧度 1度==0.017444弧度 1、画一个正圆 假设画布是500*500的尺寸,要画一个刚好能填充的圆: pen.beginPath(); pen.arc(250,250,250,0,2*Math.PI); pen.fill() pen.closePath(); 2、画一个半圆 pen.beginPath(); pen.arc(250,250,250,0,Math.PI); pen.fill() pen.closePath(); 3、画一段圆弧(不填充) pen.beginPath(); pen.arc(250,250,250,0,Math.PI); pen.stroke() pen.closePath();
c. 路径矩形
ctx.beginPath() //路径矩形 ctx.rect(x,y,width,height) //给矩形描边 ctx.stroke(); //给矩形填充 ctx.fill(); //以上,可以实现一个描边+填充的矩形,可以代替最开始学的空心矩形和实心矩形
四、上色:填充、描边、边框粗细
-
修改描边的颜色
//在画东西之前就要先设置颜色 pen.strokeStyle="合法的颜色名"
-
修改边框粗细
pen.lineWidth="数值" //比如: pen.lineWidth=5;
-
修改、添加填充色
pen.fillStyle="合法的颜色名"
-
描边路径
//在绘制路径后调用该方法 pen.stroke();
-
填充路径
//在绘制路径后调用该方法 pen.fill();
-
开始绘制路径,调用以下方法
pen.beginPath();
-
结束绘制路径,调用以下方法(不是必须的)
pen.closePath();
今日单词
- canvas 帆布,画布
- getContext 2D画笔方法
- strokeRect 空心矩形
- stroke 描边
- strokeStyle 描边样式
- fillRect 填充矩形(实心矩形)
- clearRect 清除矩形
- moveTo 起点(锚点)
- lineTo 其他点 (锚点)
- stroke 描边
- beginPath() 开始路径
- closePath() 结束路径
此资源下载链接已被无情的隐藏,请输入验证码解锁:
请关注本站公众号回复“验证码”,获取验证码。
在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号
![WEB前端全栈圈](https://www.imqd.cn/wp-content/themes/imqd/images/imqdcn.jpg)