canvas基础

2021-12-24 13:34:03 阅读：173 来源： 互联网

标签：canvas bg 基础 ctx rgb rgba 100 red

页面布局

<canvas id="canvas" width="500px" height="300px"></canvas>

JS代码

let canvas = document.getElementById("canvas"); //获取画板
let ctx = canvas.getContext("2d"); //获取2d绘画对象
ctx.moveTo(100, 100); //设置起始点为100,100
ctx.lineTo(200, 100); //规划路径
ctx.stroke(); //画到画板上

//其他函数
ctx.closePath(); //自动闭合图案(必须是一笔)
ctx.BeginPath(); //另起一笔
ctx.lineWidth = 10; //设置当前笔画的粗细
ctx.fill(); //填充
		  //起始x 起始y 终点x 终点y 矩形左上角与右下角
ctx.clearRect(x0,  y0,  x1,    y1); //矩形橡皮擦

ctx.lineGap = ""; //线端样式  这俩属性值 自行百度
ctx.lineJoin = ""; //两条件交接处的样式

矩形

		//x    y    长   宽
ctx.rect(100, 100, 200, 100); //画矩形
ctx.fill(); //填充
ctx.stroke(); //渲染

ctx.strokeRect(100, 100, 200, 100); //矩形框,渲染
ctx.fillRect(100, 100, 200, 100); //矩形填充并渲染

弧形与圆

/*
 * x: 圆心x y:圆心y r:半径 start:起始角度 end:结束角度 dirct: 0顺时针 1逆时针
 */
ctx.arc(x, y, r, start, end, dirct);
ctx.arc(100, 100, 50, 0, Math.PI, 0); //半圆弧

旋转平移(针对全局坐标系)

ctx.moveTo(100, 100); //移动到0 0
ctx.rorate(Math.PI / 6); //以0, 0点旋转 30度

ctx.translate(100, 100); //坐标系原点平移到100, 100
ctx.rorate(Math.PI / 6); //以100, 100点旋转 30度

save 与 restore

ctx.save(); //保存坐标系的平移旋转缩放数据

ctx.restore(); //恢复到上次保存的状态

填充

ctx.fillStyle = "rgb/rgba/#000000/red";

let img = new Image();
img.src = "";
img.onload = function () {
	//填充不重复的图片,以坐标原点0, 0开始平铺
	//ctx.translate(100, 100); //坐标系原点平移
	let bg = ctx.createPattern(img, "no-repeat");
	ctx.fillStyle = bg;
	ctx.fillRect(0, 0, 100, 50);
}
								//x0 y0 x1  y1
let bg = ctx.createLinearGradient(0, 0, 200, 0); //线性渐变
bg.addColorStop(0, "rgb/rgba/#000000/red"); //设置某点(0-1)的颜色
bg.addColorStop(0.5, "rgb/rgba/#000000/red");
bg.addColorStop(1, "rgb/rgba/#000000/red");

							    //x0 y0 r0 x1 y1 r1
let bg = ctx.createRadialGradient(0, 0, 0, 0, 0, 100); //径向渐变
bg.addColorStop(0, "rgb/rgba/#000000/red"); //设置某点(0-1)的颜色
bg.addColorStop(0.5, "rgb/rgba/#000000/red");  
bg.addColorStop(1, "rgb/rgba/#000000/red");

阴影

ctx.shadowColor = "rgb/rgba/#000000/red"; //阴影颜色
ctx.shadowBlur = 30; //阴影模糊值
ctx.shadowOffsetX = 10; //阴影x偏移
ctx.shadowOffsetY = 20; //阴影y偏移

文字

ctx.font = "30px 字体"; //设置文字字体大小与字体类型
			//内容      x    y
ctx.strokeText("文字", 100, 100); //文字描边
ctx.fillText("文字", 100, 200); //文字填充

标签：canvas,bg,基础,ctx,rgb,rgba,100,red
来源： https://blog.csdn.net/yuey0809/article/details/122120816

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9