微信扫一扫打赏支持
摘要: html5--5-16 综合实例绘制饼图 实例 学习要点 通过综合练习回顾之前的内容 如果把Canvsas比作宫殿的话,我们目前学到的知识还只是隔着门缝往里面初窥,为什么不进去呢?因为我们还没有掌握大门的钥匙,而这个钥匙就是JavaScript脚本语言,我们会在第七章进行系统的学习,同时也会在后续课 阅读全文
posted @ 2017-12-05 16:26 范仁义 阅读(736) 评论(0) 推荐(0) 编辑
摘要: html5--5-15 绘制阴影 实例 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 8 <body> 9 </body> 10 </html><!DOC 阅读全文
posted @ 2017-12-05 15:46 范仁义 阅读(658) 评论(0) 推荐(0) 编辑
摘要: html5--5-14 阶段小练习:绘制太极图案 学习要点 运用前几节课的知识完成一个小练习 这个图案有多种不同的绘制方法,这里只做一个简单的演示,练习的时候可以自己思考一下,尝试其他的方法,或者对这个图案进行进一步的美化。 渐变色绘制方法 createLinearGradient() 创建线性渐变 阅读全文
posted @ 2017-12-05 10:59 范仁义 阅读(787) 评论(0) 推荐(0) 编辑
摘要: html5--5-13 渐变色 学习要点 掌握渐变色的绘制方法 渐变色绘制方法 createLinearGradient() 创建线性渐变 createLinearGradient(x1,y1,x2,y2) 颜色渐变的起始坐标和终点坐标 addColorStop(位置,"颜色值") 0表示起点... 阅读全文
posted @ 2017-12-05 10:35 范仁义 阅读(1380) 评论(0) 推荐(0) 编辑
摘要: html5--5-12 渐变色 学习要点 掌握渐变色的绘制方法 渐变色绘制方法 createLinearGradient() 创建线性渐变 createLinearGradient(x1,y1,x2,y2) 颜色渐变的起始坐标和终点坐标 addColorStop(位置,"颜色值") 0表示起点... 阅读全文
posted @ 2017-12-05 10:04 范仁义 阅读(1580) 评论(0) 推荐(0) 编辑
摘要: html5--5-11 绘制文字 学习要点 掌握文字的绘制方法 文字的绘制方法 strokeText("文字",x,y,maxWith) 绘制(描边)空心文字 fillText("文字",x,y,maxWith) 绘制实心 字体样式:font="大小 字体 ..." 矩形的绘制方法 rect(x,y 阅读全文
posted @ 2017-12-05 02:38 范仁义 阅读(984) 评论(0) 推荐(0) 编辑
摘要: html5--5-9 绘制扇形 学习要点 综合运用已经学过的知识绘制一个扇形 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无填充) fillRect(x,y,w,h) 绘制"被填充"的矩形 stroke() 绘制已定义的路径 阅读全文
posted @ 2017-12-05 01:49 范仁义 阅读(610) 评论(0) 推荐(0) 编辑
摘要: html5--5-8 绘制圆/弧 学习要点 掌握绘制圆弧的方法 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无填充) fillRect(x,y,w,h) 绘制"被填充"的矩形 stroke() 绘制已定义的路径 fill() 阅读全文
posted @ 2017-12-05 01:40 范仁义 阅读(458) 评论(0) 推荐(0) 编辑
摘要: html5--5-7 绘制圆/弧 学习要点 掌握arc() 方法创建圆弧/曲线(用于创建圆或部分圆) 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无填充) fillRect(x,y,w,h) 绘制"被填充"的矩形 strok 阅读全文
posted @ 2017-12-05 01:27 范仁义 阅读(598) 评论(0) 推荐(0) 编辑
摘要: html5--5-6 绘制圆/弧 学习要点 掌握arc() 方法创建圆弧/曲线(用于创建圆或部分圆) 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无填充) fillRect(x,y,w,h) 绘制"被填充"的矩形 strok 阅读全文
posted @ 2017-12-05 01:10 范仁义 阅读(595) 评论(0) 推荐(0) 编辑
摘要: html5--5-5 绘制填充矩形 学习要点 掌握绘制矩形的方法:strkeRect()/fillRect() 掌握绘制路径的 beginPath()和closePath() 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无填 阅读全文
posted @ 2017-12-05 00:54 范仁义 阅读(3412) 评论(0) 推荐(0) 编辑
摘要: html5--5-4 绘制矩形 学习要点 掌握绘制矩形的方法:strkeRect()/fillRect() 掌握绘制路径的 beginPath()和closePath() 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无填充) 阅读全文
posted @ 2017-12-05 00:10 范仁义 阅读(361) 评论(0) 推荐(0) 编辑