canvas基本用法
一、创建canvas
Document - 锐客网
如图
文章图片
image.png 二、修改 Canvas 的画布
文章图片
image.png 三、获取绘制环境 我们可以通过 var ctx = canvas_1.getContext("2d"); 来去获取到我们的绘制环境。
文章图片
image.png 四、绘制的坐标轴 横轴向右是正，纵轴向下是正。
文章图片
image.png 五 、绘制直线 绘制直线满足的条件
线的起点
线的终点
线的颜色
线的宽度
文章图片
image.png 直线样式
// 直线填充
// 开始绘制
ctx.beginPath();
//设置绘制起点
ctx.moveTo(0, 0);
//设置绘制下一个点
ctx.lineTo(300, 400);
// //设置绘制下一个点
ctx.lineTo(400, 100);
// //设置线的宽度
ctx.lineWidth = 10;
// //结束绘制
ctx.closePath();
// // 设置填充样式
ctx.fillStyle = "green";
// //设置绘制的样式
ctx.strokeStyle = "red";
ctx.fill()
ctx.stroke()
文章图片
image.png
设置边角的样式及绘制矩形
文章图片
image.png
绘制字符串
文章图片
image.png
【canvas基本用法】设置阴影
文章图片
image.png
推荐阅读
- 做一件事情的基本原理是什么（）
- dubbo基本认识
- HTML基础--基本概念--跟着李南江学编程
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 一般模型化关系——从模型是什么到如何起作用的基本答案
- canvas（一）基本用法
- 带你了解类型系统以及flow和typescript的基本使用
- MySQL数据库的基本操作
- 项目团队管理|项目团队管理 - 塔克曼阶梯理论
- 1-Java基础知识