HTML
wjk_along
这个作者很懒,什么都没留下…
展开
-
canvas入门教程:概述
canvas入门教程大家新年好,祝大家猪年大吉大利,天天吃鸡。预期是年后回来整理canvas入门教程,奈何被困魔都,以前还挺好的某cheng APP,今年让人失望了,真是信了他的邪——买不到回家的票。眼看大家都开开心心到了家,自己还不知归期,干啥都没了兴趣,索性提前开始,年关所有看见这篇文章人绝对都是学霸!1.过程和结果过程:每天30分钟到1个小时阅读一到两个章节,1周左右即可完成教程。...原创 2019-02-05 22:28:44 · 527 阅读 · 1 评论 -
canvas快速入门1:canvas的线
1. canvas的线设置canvas宽高,并获取canvas对象,判断是否支持canvas。<!DOCTYPE html><html lang="en"><head&a原创 2019-02-06 22:29:51 · 387 阅读 · 0 评论 -
canvas快速入门2---canvas的面
1.canvas的面上一章节介绍了如何画线,总共用到了8个API,这一章节我们来画“面”,主要是多边形,矩形,圆形,最后用不同颜色填充这些形状内部。上一章出现的API这里不再解释,不知道的请先看上一章。1.趁热打铁画个三角形(多边形)步骤:获取画布上下文。确定三角形的三个点A(10,10), B(100,10), C(55,100).设置线宽2px,颜色红色,绘制。<can...原创 2019-02-12 11:45:29 · 335 阅读 · 0 评论 -
canvas快速入门3:动态虚线圆
这一章来绘制概述里面的第一个图,非常非常的简单。1.绘制动态虚线圆形1.分析画圆需要arc(),stroke() API设置画线是虚线而不是实线(本章新增API)setLineDash([number]):设置虚线,参数为数字数组,数字是用来设置虚线每一个小段的长度。比如设置值[4,2]则虚线如【 — - — - — -…】循环出现。lineDashOffset [=number...原创 2019-02-12 11:46:00 · 1571 阅读 · 1 评论 -
canvas快速入门4:绘制文字
canvas文字的绘制我们在使用canvas画各种图的时候,大多时候会有文字的绘制,比如,各种图表,进度条,钟表等等,都需要绘制文字。所以绘制文字也是canvas入门必须的基础。1.canvas绘制文字的API绘制文字很简单就下面这个方法。fillText(str, x, y, maxW):str绘制的文字,(x, y)起始坐标,maxW是最大宽度,绘制文字超过该宽度则不显示。stro...原创 2019-02-12 11:46:23 · 5084 阅读 · 2 评论 -
canvas快速入门5:canvas画进度条
canvas画进度条这一章画概述中出现的圆形进度条,再加一个水平进度条。1.水平进度条水平进度条要绘制文字水平进度条是一个矩形或者比较粗的线。要从零增长到100,动态变化。...原创 2019-02-12 11:46:53 · 6462 阅读 · 0 评论