欧美做受网站视频播放,wordpress搭建视频分享,wordpress制作主题容易吗,淄博网站制作优化#x1f345; 作者#xff1a;阿珊 #x1f345; 作者简介#xff1a;95后前端小姐姐#xff0c;蓝桥签约作者#xff0c;欢迎点赞、收藏、评论 #x1f345; 粉丝专属福利#xff1a;知识体系、面试题库、技术互助、简历模板。文末公众号领取 #x1f345; 包邮送书 作者阿珊 作者简介95后前端小姐姐蓝桥签约作者欢迎点赞、收藏、评论 粉丝专属福利知识体系、面试题库、技术互助、简历模板。文末公众号领取 包邮送书每周1-2次点赞、收藏、评论本文章即可参与或关注公众号「信息技术智库」回复「送书」 送书活动说明及每期开奖https://blog.csdn.net/weixin_39032019/category_11380101.html 目录
canvas简介
canvas详解
在网页中创建canvas画布
使用JavaScript获取网页中的canvas对象
canvas坐标系
绘制图形绘制直线
使用连续画线的方法绘制一个三角形
绘制图形绘制矩形
绘制图形绘制圆弧
使用arc()方法绘制圆弧
使用arc()方法画圆
指定如何绘制线段的末端
画一个正六边形
画一个笑脸
送书活动
参与方式一
参与方式二 canvas简介
canvas元素是HTML5中新增的一个用于绘图的重要元素。 在页面中增加一个canvas元素就相当于在网页中添加一块画布之后就可以利用一系列的绘图指令在“画布”上绘制图形。 在网页上使用canvas元素时它会创建一块矩形区域。 用户可以自定义具体的大小或者设置canvas元素的其他特性。 在页面中加人了canvas元素后可以通过Javascript来控制画布。 可以在其中添加图片/线条/文字等也可以在里面进行绘图设置/高级动画等。 canvas详解
canvas idxxx height… width……/canvas
说明 idcanvas元素的标识id height画布高度单位为像素 width画布宽度单位为像素 canvas/canvas之间指定当浏览器不支持canvas时显示的字符串 在网页中创建canvas画布
canvas idmycanvas height600 width400 您的浏览器不支持 canvas。 /canvas
在Chrome等支持HTML5的浏览器创建一个空画布什么都不显示。ie8以下会显示您的浏览器不支持 canvas。 使用JavaScript获取网页中的canvas对象 在JavaScript中可以使用document.getElementById()方法获取网页中指定id值的对象 document.getElementById(元素的id属性) 获取id属性值为mycanvas对象的代码如下
script typetext/javascript var cdocument.getElementById(mycanvas); /script 得到的对象c即为mycanvas对象。 要在其中绘图还需要获得mycanvas对象的2d渲染上下文canvasRenderingContext2D对象 var ctxc.getContext(2d); canvas坐标系 canvas元素构建的画布是一个基于二维(x,y)的网格。
坐标原点(0,0)位于canvas的左上角。 从原点延x轴从左到右取值依次递增。 从原点延y轴从上到下取值依次递增。 绘制图形绘制直线 在网页中使用canvas元素定义一个canvas画布用于绘画
canvas idmycanvas height… width….../canvas
使用JavaScript获取网页中的canvas对象并获取canvas对象的2d上下文
var ctx document.getElementById(mycanvas).getContext(2d);
调用beginPath()方法指示开始创建路径 ctx.beginPath();
调用moveTo(x, y)方法将坐标移至起点(x,y) ctx.moveTo(xy);
调用lineTo(x, y)方法创建直线至点(x,y)的路径 ctx.lineTo(xy);
调用stroke()方法绘制路径 ctx.stroke();
画一条起点为(10, 10)、终点为(50, 50)的直线。
canvas idmycanvas height100 width100您的浏览器不支持 canvas。/canvasscript typetext/javascript function drawline() { var cdocument.getElementById(mycanvas); // 获取网页中的canvas对象 var ctxc.getContext(2d); //获取canvas对象的上下文2d绘图环境 ctx.beginPath(); // 开始创建路径 ctx.moveTo(10,10); // 创建路径的起点 ctx.lineTo(50,50); // 添加路径中的一个点 ctx.stroke(); // 绘制路径 } window.addEventListener(load, drawline, false);//页面加载时触发drawline函数画直线/script 使用连续画线的方法绘制一个三角形
canvas idmycanvas height100 width100您的浏览器不支持 canvas。/canvasscript typetext/javascript function drawtriangle(){ var cdocument.getElementById(mycanvas); // 获取网页中的canvas对象 var ctxc.getContext(2d); //获取canvas对象的2d上下文 ctx.beginPath(); // 开始创建路径 ctx.moveTo(10,10); // 将坐标移至路径起点 ctx.lineTo(10,100); // 向路径中添加一个点 ctx.lineTo(100,100); // 向路径中添加一个点 ctx.lineTo(10,10); // 向路径中添加一个点 ctx.stroke(); // 绘制路径 } window.addEventListener(load, drawtriangle, true);//页面加载时触发drawtriangle函数画三角形/script 绘制图形绘制矩形 使用rect()方法绘制矩形路径
canvas idmycanvas height500 width500您的浏览器不支持 canvas。/canvasscript typetext/javascript function drawRect(){ var cdocument.getElementById(mycanvas); // 获取网页中的canvas对象 var ctxc.getContext(2d); //获取canvas对象的2d上下文 ctx.beginPath(); // 开始创建路径 ctx.rect(20,20, 100, 50); // 创建左上顶点为(20, 20)、长100、宽50的矩形路径 ctx.stroke(); //绘制路径 } window.addEventListener(load, drawRect, true); //页面加载时调用drawRect函数画矩形/script
使用strokeRect()方法绘制矩形路径 不需要使用beginPath()和stroke()即可绘制矩形边框
canvas idmycanvas height500 width500您的浏览器不支持 canvas。/canvasscript typetext/javascript function drawRect(){ var cdocument.getElementById(mycanvas); // 获取网页中的canvas对象 var ctxc.getContext(2d); //获取canvas对象的2d上下文 //ctx.beginPath(); // 开始创建路径 //ctx.rect(20,20, 100, 50); // 创建左上顶点为(20, 20)、长100、宽50的矩形路径 ctx. strokeRect(20,20, 100, 50); //ctx.stroke(); //绘制路径 } window.addEventListener(load, drawRect, true); //页面加载时调用drawRect函数画矩形/script
使用fillRect()方法填充矩形 不需要使用beginPath()和stroke()即可绘制矩形填充
canvas idmycanvas height500 width500您的浏览器不支持 canvas。/canvasscript typetext/javascript function drawRect(){ var cdocument.getElementById(mycanvas); // 获取网页中的canvas对象 var ctxc.getContext(2d); //获取canvas对象的2d上下文 //ctx.beginPath(); // 开始创建路径 ctx. fillRect(20,20, 100, 50); //ctx.stroke(); //绘制路径 } window.addEventListener(load, drawRect, true); //页面加载时调用drawRect函数画矩形/script
使用clearRect()方法清除矩形
canvas idmycanvas height500 width500您的浏览器不支持 canvas。/canvas script typetext/javascript function drawRect() { var cdocument.getElementById(mycanvas); // 获取网页中的canvas对象 var ctxc.getContext(2d); //获取canvas对象的2d上下文 ctx. fillRect(20,20, 100, 50); ctx.clearRect(40,40, 60, 10); } window.addEventListener(load, drawRect, true); //页面加载时调用drawRect函数画矩形 /script 绘制图形绘制圆弧 arc(x, y, radius, startingAngle, endingAngle, antiClockwise); 使用arc()方法仅仅是创建圆弧路径如需绘制路径要再使用strock()方法
使用arc()方法绘制圆弧
canvas idmycanvas height500 width500您的浏览器不支持 canvas。/canvas script typetext/javascript function drawArc() { var cdocument.getElementById(mycanvas); // 获取网页中的canvas对象 var ctxc.getContext(2d); //获取canvas对象的上下文2d绘图环境 ctx.beginPath(); // 开始创建路径 ctx.arc(50, 50, 30, 1.1 * Math.PI, 1.9 * Math.PI, false); ctx.stroke(); // 绘制路径 } window.addEventListener(load, drawArc, true); /script
使用arc()方法画圆
canvas idmycanvas height500 width500您的浏览器不支持 canvas。/canvasscript typetext/javascript function drawArc() { var cdocument.getElementById(mycanvas); // 获取网页中的canvas对象 var ctxc.getContext(2d); //获取canvas对象的上下文2d绘图环境 ctx.beginPath(); // 开始创建路径 ctx.arc(50, 50, 30, 0, 2 * Math.PI, false); ctx.stroke(); // 绘制路径 } window.addEventListener(load, drawArc, true); /script
小结 路径path仅有路径是不会有任何显示效果的 描边stroke绘制路径/绘制路径的轮廓 填充fill绘制路径内部 通过设置canvasRenderingContext2D对象的以下属性指定描边的颜色和描边的宽度。
canvas idmycanvas height500 width500您的浏览器不支持 canvas。 /canvasscript typetext/javascript function strokeColorAndWidth() { var cdocument.getElementById(mycanvas); // 获取网页中的canvas对象 var ctxc.getContext(2d); //获取canvas对象的上下文2d绘图环境 ctx.lineWidth 5; ctx.strokeStyle red; ctx.beginPath(); // 开始创建路径 ctx.moveTo(10,10); // 创建路径的起点 ctx.lineTo(100,100); // 添加路径中的一个点 ctx.stroke(); //绘制路径 ctx.strokeStyle yellow; ctx.strokeRect(25,25, 80, 60); //矩形 ctx.strokeStyle blue; ctx.beginPath(); // 开始创建路径 ctx.arc(100, 70, 40, 0, 2 * Math.PI, false); //圆形 ctx.stroke(); //绘制路径 } window.addEventListener(load, strokeColorAndWidth, true);/script 指定如何绘制线段的末端 通过设置canvasRenderingContext2D对象的lineCap属性可以指定线段的末端如何绘制 lineCap 属性只有绘制较宽线段时才有效 ctx.lineWidth 20; ctx.strokeStyle red; ctx.lineCap butt; ctx.beginPath(); ctx.moveTo(10,10); ctx.lineTo(80,10); ctx.stroke(); ctx.lineCap round; ctx.beginPath(); ctx.moveTo(10,40); ctx.lineTo(80,40); ctx.stroke(); ctx.lineCap square; ctx.beginPath(); ctx.moveTo(10,70); ctx.lineTo(80,70); ctx.stroke(); 画一个正六边形 思路提示一个六边形是由六根直线组合的那么可以通过计算坐标把直线连接起来就是六条直线合起来的正六边形啦
canvas idmycanvas height500 width500您的浏览器不支持 canvas。/canvasscript typetext/javascript function drawline(){ var cdocument.getElementById(mycanvas); // 获取网页中的canvas对象 var ctxc.getContext(2d); //获取canvas对象的上下文2d绘图环境 ctx.lineWidth 10; ctx.strokeStyle red; ctx.beginPath(); // 开始创建路径 ctx.moveTo(80,80); // 创建路径的起点 ctx.lineTo(160,80); // 添加路径中的一个点 ctx.stroke(); // 绘制路径 ctx.moveTo(156,80); // 创建路径的起点 ctx.lineTo(196,149.5); // 添加路径中的一个点 ctx.stroke(); // 绘制路径 ctx.moveTo(196,147); // 创建路径的起点 ctx.lineTo(156,219); // 添加路径中的一个点 ctx.stroke(); // 绘制路径 ctx.moveTo(160,219); // 创建路径的起点 ctx.lineTo(80,219); // 添加路径中的一个点 ctx.stroke(); // 绘制路径 ctx.moveTo(84,219); // 创建路径的起点 ctx.lineTo(44,147); // 添加路径中的一个点 ctx.stroke(); // 绘制路径 ctx.moveTo(44,149.5); // 创建路径的起点 ctx.lineTo(84,80); // 添加路径中的一个点 ctx.stroke(); // 绘制路径 } window.addEventListener(load, drawline, false);//页面加载时触发drawline函数画直线/script 画一个笑脸 canvas idmycanvas height500 width500您的浏览器不支持 canvas。/canvasscript typetext/javascript function drawArc(){ var cdocument.getElementById(mycanvas); // 获取网页中的canvas对象 var ctxc.getContext(2d); //获取canvas对象的上下文2d绘图环境 ctx.beginPath(); // 开始创建路径 ctx.arc(250, 250, 100, 0, 2 * Math.PI, false); ctx.fillStyle yellow; ctx.fill(); ctx.stroke(); // 绘制路径 ctx.beginPath(); // 开始创建路径 ctx.arc(200, 200, 10, 0, 2 * Math.PI, false); ctx.fillStyle gray; ctx.fill(); ctx.stroke(); // 绘制路径 ctx.beginPath(); // 开始创建路径 ctx.arc(300, 200, 10, 0, 2 * Math.PI, false); ctx.fillStyle gray; ctx.fill(); ctx.stroke(); // 绘制路径 ctx.beginPath(); // 开始创建路径 ctx.arc(250, 280, 40,0.8* Math.PI, 0.2* Math.PI, true); ctx.stroke(); // 绘制路径 } window.addEventListener(load, drawArc, true);/script
送书活动
参与方式一
点赞、收藏、评论本文即可直接参与3天内会公布抽奖信息和联系你。
参与方式二
关注「信息技术智库」回复「送书」 本期3本如有需要可等下期活动或自行安排
《人工智能数学基础》https://item.jd.com/13009168.html 《Python神经网络入门与实战》 https://item.jd.com/12748581.html 《Python入门到人工智能实战》https://item.jd.com/12648361.html 《Python量化金融编程从入门到精通》https://item.jd.com/13045490.html 添加公众号「信息技术智库」 硬核资料20G8大类资料关注即可领取PPT模板、简历模板、技术资料 技术互助技术群大佬指点迷津你的问题可能不是问题求资源在群里喊一声。 面试题库由各个技术群小伙伴们共同投稿热乎的大厂面试真题持续更新中。 知识体系含编程语言、算法、大数据生态圈组件Mysql、Hive、Spark、Flink、数据仓库、前端等。 送书抽奖丨技术互助丨粉丝福利
