h5逐步实现 <<canvas系统>>
时间:2022-07-28
本文章向大家介绍h5逐步实现 <<canvas系统>>,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
body
{
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="draw" ></canvas>
<script type="text/javascript">
//获取canvas.
const canvas=document.querySelector("#draw");
if(canvas.getContext)
{
var ctx=canvas.getContext("2d");
console.log("支持666");
}
else
{
console.log("不支持");
}
/*支持就执行余下的语句能够用起来,不支持的话,页面上会什么效果都没有。*/
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
ctx.lineWidth=90;//线条的颜色.
ctx.lineCap="round";/*线条结束时的形状*/
ctx.lineJoin="round";/*当两条线条相交时.*/
ctx.strokeStyle="red";
let isDrawing=false;//还没开始画
let x=0;let y=0;
let lastX = 0;
let lastY = 0;
let hue = 0;
let direction = true;
function draw(e)
{
if(!isDrawing)
{
return;
}
x=e.offsetX;//获取移动后停下的坐标点.
y=e.offsetY;//获取移动后停下的坐标点.
//彩虹效
ctx.strokeStyle=`hsl(${hue},90%,50%)`;
if(hue>360)hue=0;
hue++;
// 控制笔触大小
if(ctx.lineWidth>120||ctx.lineWidth<10)
{
direction=!direction;
}
if(direction)
{
ctx.lineWidth++;
}
else
{
ctx.lineWidth--;
}
/*这段思路时:开始direction = true,++到大于120就direction=!direction;,为false,就else--到小于10时就 direction=!direction;,true,就++至此循环.*/
ctx.beginPath();
ctx.moveTo(lastX,lastY);//开始画了
ctx.lineTo(x,y);
ctx.stroke();
[lastX,lastY]=[x,y]
}
canvas.addEventListener('mousedown',e=>
{
isDrawing=true;//开始画.
[lastX,lastY]=[e.offsetX,e.offsetY];//获取按下的开始xy坐标点
});
canvas.addEventListener("mousemove",draw);
canvas.addEventListener('mouseup',()=>isDrawing=false);//这两个都false
canvas.addEventListener('mouseout',()=>isDrawing=false);
</script>
</body>
</html>
第一:写一个canvas对象,用canvas来做.
```javascript
<canvas id="draw" ></canvas>
注意一下:它默认宽300 高150。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
console.log(canvas.offsetWidth,canvas.offsetHeight);
</script>
</body>
</html>
第二·:判断所用的浏览器是否支持canvas.
const canvas=document.querySelector("#draw");
if(canvas.getContext)
{
var ctx=canvas.getContext("2d");
console.log("支持666");
}
else
{
console.log("不支持");
}
第三:让canvas绘图可以画整个body.并且要设置线条的宽度+线条结束时候的形状+两天线条相交时的形状.+线条的颜色.
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
ctx.lineWidth=90;
ctx.lineCap="round";
ctx.lineJoin="round";
ctx.strokeStyle="red";
第四;当点击body某一处的时候就开始作画.然后是获取按下去时候的xy坐标点.
canvas.addEventListener('mousedown',e=>
{
isDrawing=true;
[lastX,lastY]=[e.offsetX,e.offsetY];
});
第五:移动的时候触发draw函数,
canvas.addEventListener("mousemove",draw);
第六:记录移动完毕后的xy坐标.
x=e.offsetX;
y=e.offsetY;
第七;多姿多彩的效果:
ctx.strokeStyle=`hsl(${hue},90%,50%)`;
if(hue>360)hue=0;
hue++;
第八:控制笔触的宽.(口诀;太大了就小,太小了就大)
if(ctx.lineWidth>120||ctx.lineWidth<10)
{
direction=!direction;
}
if(direction)
{
ctx.lineWidth++;
}
else
{
ctx.lineWidth--;
}
第九:开始绘制
ctx.beginPath();
ctx.moveTo(lastX,lastY);
ctx.lineTo(x,y);
ctx.stroke();
[lastX,lastY]=[x,y]//核心
注意一下·;lastx与lasty是down的时候的xy坐标,x,y是move完毕后的坐标. 有一个问题
第十:怎么办?[lastX,lastY]=[x,y]
就行了,代表按下了一直移动能够完美续接.
不然的话,会按下然后移动会像上面的图一样。
这里解决了上面的图片的问题.
- HLS 视频点播初探
- 周杰伦读心术背后的技术实现
- 盒子端 CSS 动画性能提升研究
- 把照片唱给你听 :腾讯 AI Lab 国际领先技术邀你「趣」体验
- 因为超算云,你将比别人早10年“抵达”未来
- 网页加速特技之 AMP
- 刷屏的背后:原来腾讯字体是CDC和Monotype联手打造的
- 重磅!腾讯与科大讯飞技术共创,Google ProtoBuf进入TARS家族!
- 一个简易版的T4代码生成"框架"
- yield在WCF中的错误使用——99%的开发人员都有可能犯的错误[上篇]
- 以上下文(Context)的形式创建一个共享数据的容器
- yield在WCF中的错误使用——99%的开发人员都有可能犯的错误[下篇]
- ASP.NET MVC下的四种验证编程方式
- 总体介绍ASP.NET Web API下Controller的激活与释放流程
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 二叉树遍历非递归程序 -- 使用栈模拟系统栈
- Android开发之多媒体文件获取工具类实例【音频,视频,图片等】
- 二叉树及leetcode练习题
- 利用递归函数的返回值
- Android DataBinding的官方双向绑定示例
- 整数拆分
- Android Drawerlayout实现侧滑菜单效果
- 分割等和子集
- LeetCode--打家劫舍问题
- Android 中ListView和GridView赋值错位
- 谈谈类加载器
- Android中AlarmManager+Notification实现定时通知提醒功能
- Java垃圾回收相关面试题
- Android中backgroundDimEnabled的作用
- 甲基化相关的习题背景补充