南宁小程序开发,挑战百日学习计划第47天(canvas画板工具1)

南宁小程序开发：www.nasiot.com

canvas画板工具，一定要在canvas里面写width height 否则会导致画线被强制放大

<canvas id="c" width="500" height="300" style="border:1px solid #333"></canvas>

画一个矩形

   var c=document.getElementById("c");var ctx=c.getContext("2d");ctx.moveTo(20,20);ctx.lineTo(120,20);ctx.lineTo(120,120);ctx.lineTo(20,120);  ctx.closePath();ctx.stroke();

运行结果如下：

画三角形：主要使用的 closePath（）代码如下

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.moveTo(20,20);
ctx.lineTo(20,120);
ctx.lineTo(120,120);
ctx.closePath();
ctx.strokeStyle="blue";
ctx.stroke();

显示结果：

画圆：arc

var c=document.getElementById("canvas");
var ctx=c.getConText("2d");ctx.arc(100,100,80,0,2*Math.PI);ctx.stroke();

显示效果：

canvas 文本绘制
font 定义字体
fillText(text,x,y) // text=要绘制的文字 X Y 则是绘制的起始位置
strokeText（text，x，y）绘制文字空楼的

var c=document.getElementById("c"); var ctx=c.getContext("2d")ctx.font="20px 黑体 ";ctx.fillStyle="#123";ctx.fillText("南宁程序开发：Www.NasIot.Com！",10,100)

显示结果如下

企业小程序oa系统开发定制：www.nasiot.com

南宁小程序开发,挑战百日学习计划第47天(canvas画板工具1)相关推荐

小程序定制,挑战百日学习计划第31天（3D骰子制作)
南宁创业小公司专业做小程序开发定制 www.zkelm.com 本来只是想学一下flex得排版, 但是因为学了不理解,所以就跟着做一个骰子, 做了骰子就像让骰子动起来, 动起来了, 感觉为什么不是 ...
企业OA系统定制开发,挑战百日学习计划第50天(响应式网站开发)
上一周,在群里面吹水摸鱼,然后来了一个学生仔,正好水平很菜,比我还菜,瞬间我的感觉就上来了,炫耀的时机就在眼前. 在他面前我终于找回了信心.然后他顺水推舟,请教了我三个问题,说是学校的作业, 这逼我 ...
智能学习硬件小程序开发，提升学习感受
随着科学技术的飞速发展,各种智能学习硬件层出不穷,日常生活中的智能电子产品也愈来愈多,但是大部分硬件产品都是单独使用的,并没有配套的app或者小程序,在使用过程中总是会出现一些小插曲,比如:孩子用学习 ...
基于h5的跳一跳游戏的开发与实现_「南宁小程序开发」企业开发小程序有哪些好处？...
现如今微信小程序成为了许多企业推广自身产品的一个平台,为什么他们会选择小程序呢?小程序到底有哪些好处?接下来,南宁小程序开发公司--视点网络告诉您开发小程序的好处有哪些. 轻量性:平时APP的转化过程 ...
《微信小程序开发实战》学习笔记chapter1微信小程序人门
Chapter01 微信小程序入门 1. 微信小程序介绍 1.1 什么是微信小程序微信小程序是腾讯于2017年1月19日推出的一种不需要安装即可在微信平台上使用的应用.微信小程序和微信的原生功能应用 ...
微信小程序开发 --- 每天的学习开发进度
本来想做个APP给自己用,然后就去找工作(想做游戏测试,边玩边学最好了哈哈哈哈),我都已经在做思维导图和原型设计了,但是突然间不知道在哪看到了小程序,就搜了小程序和APP区别,发现小程序开发起来快,并 ...
微信小程序Node.js+uniapp学习计划与日程管理系统app
本学习计划与日程管理系统,主要用来为用户提供自主计划学习的主要功能,主要实现首页.计划学习页.日程安排页.个人中心页这四大页面,相对应的功能如下分析: (1) 首页:该页面主要由搜索.论坛发表. ...
微信小程序开发（英语学习助手）
本帖目的自学自用,一起学习英语及开发我们自己的学习产品吧! 已上线小程序名称:[说练英语] (欢迎搜索试用) 扫码加微信群: 也可以联系小编微信:ncu_zp , 注明来源哦重点: 代码已开源:h ...
从零开始学微信小程序开发：6 旅行计划调查
小程序对HTML5表单及表单元素进行了封装,提供了丰富的表单组件. 6.1 用form组件收集信息 form(表单)也是前端视图层与后端服务层交互过程中最重要的信息来源. 小程序的form组件具有一些 ...

南宁小程序开发,挑战百日学习计划第47天(canvas画板工具1)

南宁小程序开发,挑战百日学习计划第47天(canvas画板工具1)相关推荐

最新文章

热门文章