在JavaScript中， <canvas> 标签用于绘制图像，画布是一个矩形区域，可以控制其每一像素。
不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 必须使用脚本来完成实际的绘图任务。
//定义一个画布并赋予宽高，宽高不能在css中设置，只能在参数的属性width和height中设置
<canvas id="canvas" width="500" height="500"></canvas>;
//在script获取canvas
var canvas = document.getElementById('canvas');
//获取上下文
var ctx = canvas.getContext('2d');
//绘制文字
ctx.font = '30px 黑体'; //文本 设置文本属性，需要先设置才能进行文字绘制 ctx.strokeText('my name is jason',100,100) //描边文字 ctx.fillStyle = 'skyblue'; //填充颜色 ctx.fillText('my name is jason',100,100); //填充文字
//canvas阴影
`` ctx.shadowColor = 'black'; //设置阴影颜色
ctx.shadowBlur = 5; //阴影模糊程度
ctx.shadowOffsetX = 5; //显示阴影在x轴上的偏移量
ctx.shadowOffsetY = 5; //显示阴影在y轴上的偏移量
ctx.font = '50px 宋体'; //设置字体
ctx.strokeText('hello!',100,250); //描边文字``
//在画布上画一个圆
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); //开始绘制 var deg = Math.PI/180; //定义deg //arc:(圆心坐标x,圆心坐标y,radius半径,startange开始路径，endangle终止路径，绘画方向(true逆时针，false顺时针)) //360*deg也可以写成2*Math.PI（Math.PI = 180deg，但是不可以直接写360deg，需要先定义deg） ctx.arc(250,250,100,0,360*deg,true); ctx.closePath(); //结束绘制 ctx.stroke(); //描边 ctx.fillStyle = 'red'; //设置填充颜色 ctx.fill(）； //填充颜色
//绘制矩形 两种方式
① ctx.rect(100,100,100,100);; //(起点坐标x,起点坐标y,宽，高) ctx.stroke(); ctx.fill(); //全部填充，第一个默认颜色是黑色 ctx.fillStyle = 'red'; //改变填充颜色 ② ctx.fillRect(200,200,100,100); //默认填充黑色
//清除 clearRect
ctx.clearRect(0,0,canvas.width,canvas.height); //(起点坐标x,起点坐标y,宽，高) ,所示代码相当于清除整个画布
//canvas中图形变换的方法
var deg = Math.PI/180; ctx.rotate(45*deg); //rotate:旋转 ctx.scale(0.5,0.5); //scale:缩放，(x方向上的缩放比例,y方向上的缩放比例) ctx.translate(100,100) //translate:平移 (X轴上的平移量，Y轴上的平移量) //这些方法只对下文内容生效(会将坐标，大小进行改变)
//绘制贝塞尔曲线
//二次贝塞尔曲线
//二次贝塞尔曲线,有三个点:开始点，结束点，控制点 ctx.moveTo(0,canvas.height); //开始点坐标 ctx.quadraticCurveTo(0,0,canvas.width,0) //(控制点x,控制点y,结束点x,结束点y) ctx.stroke(); ctx.closePath();
二次贝塞尔曲线图.png
//三次贝塞尔曲线
//三次贝塞尔曲线，开始点，结束点，两个控制点 ctx.moveTo(0,canvas.height); //开始点坐标 ctx.bezierCurveTo(0,0,500,500,canvas.width,0); //两个控制点的坐标和结束点坐标 ctx.stroke(); ctx.closePath();
三次贝塞尔曲线图.png
网友评论