HTML5_canvas(设置画笔样式、左右跑动的小块、绘制路径的方法、写字板、绘制圆形的方法、吃豆豆、绘制文本、环形进度条)设置一个模板

1、canvas(相当于画图板)
这里写图片描述

这句话是必须写的 在版本高的浏览器中支持就不会显示出来,版本低的就会显示出
这里写图片描述

—->宽高样式直接在里面写;(默认宽度300,高度150)

这里写图片描述

 设置画笔样式

这里写图片描述
这里写图片描述

——>画出一个实心小方块(x轴 ,y轴,宽度,高度)

这里写图片描述
这里写图片描述
—–>边框线条宽度(宽度是从中间开始分的)
这里写图片描述

这里写图片描述
—->画出一个空心有边框的小方块
这里写图片描述
这里写图片描述

—–>空心小块边框的颜色
这里写图片描述

—–>实块的背景颜色(默认是黑色)

这里写图片描述
(opacity)
这里写图片描述

—–>清除画板(从0,0位置开始)

 左右跑动的小块

这里写图片描述
这里写图片描述
这里写图片描述

——->必须先清除之前的小块
方法一:
这里写图片描述

方法二:

这里写图片描述

 绘制路径的方法

这里写图片描述
—–>(开始路径是必须写的)
这里写图片描述

——->画笔的起点

这里写图片描述
—–>线条经过的地点

这里写图片描述
——>线条开始运行

这里写图片描述
—–>
(闭合的可以不用,如果用的话结束的时候自动闭合成一个封闭区域)
这里写图片描述

—–>(未加)
这里写图片描述
——(添加)
——->
这里写图片描述

这里写图片描述
——->填充

 设置一个模板
这里写图片描述
这里写图片描述

 写字板

这里写代码片

这里写图片描述

 绘制圆形的方法

这里写图片描述
这里写图片描述

这里写代码片

 吃豆豆(创建路径)
闭嘴的:
这里写图片描述

——>
这里写图片描述
张开嘴巴的:

这里写图片描述
——>
这里写图片描述
两个来回切换的效果:

这里写图片描述
——>先执行一次open();

 绘制文本
这里写图片描述

—–>设置字体大小和字体
这里写图片描述

这里写图片描述
——>输入文本的宽度

这里写图片描述

这里写图片描述
—–>

这里写图片描述
这里写图片描述
—–>
这里写图片描述

 环形进度条
这里写图片描述

——->
这里写图片描述
加上颜色后:
这里写图片描述

——>
这里写图片描述
加上文字后:

这里写图片描述
——>
这里写图片描述


关于善知教育(官网:善知教育(点击进入) 微信公众号:善知技术)
地址:北京东燕郊经济技术开发区文化大厦
咨询老师郑老师 电话/微信:13315631002 QQ:1939441377
目前我们开设Java服务器Html5前端网页Android移动端PHP服务器,有全日制班有周末班;
学费优惠至8480!!!!
我们的优势:

  • 基础课程一个月免费学,全程面授;
  • 平均就业薪资10000-15000;
  • 免费重听,跨学科免费学习;
  • 5-5.5个月大容量技术授课;
  • 0学费0基础入学,海量项目实训, 弹性教学制度;
  • 大部分学生找到月薪10k以上薪资工作, 项目实训自然终止;
  • 课程全程视频录制,偶尔耽搁也不担心;
  • 学习途中随时可以无理由退费根据学生情况;
  • 灵活安排授课时间,一个科目学不会可以免费学习另一个科目;
  • 全日制班,周末班,网上授课同时进行;
  • 技术交流QQ群:198983438(加群请备注在哪里看到我们的群)在群里面随时会更新一些我们的课程视频以及开班动态

善知教育学习视频大汇总

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值