为啥要写手记 为了---

我看了一篇文章是
体验完成一件事的压力和乐趣
我决定开始写我自己的手记
不在美丽 只在 自己 和学会用写作来思考
发现自己的方向
我的第一篇手记 开始了 告诉自己我在尝试努力
妈的 又开学了
我又在重点班 真他妈累
第一次的手记
虽然边学习编程边上学 上高2 很累但是也要坚持上学时 每天学一小时的编程
上学了，时间虽然少了 但是 也给了一个缓慢的环境 可以将一些代码和思想牢记于心
注意这不是教材 我可 是一小垃圾 啊 我只是打算激励一下我自己
和告诉自己 我可以为 兴趣而战
先来总结一下这个星期学的 我打算学习一下html的canvas 做一个游戏装一装逼
对我来说 绝对是有难度的
我不是很熟悉 css 和JavaScript和HTML
好吧都不是很会 我只是喜欢写作 才来写手记的
并希望 写作可以使我 对学习编程的方法 和 学习如何学习这方面有提升
先是 漫长的学习准备期
html canvas
canvas的坐标系统
不懂canvas的坐标系统那你就无法 懂的那些奇奇怪怪的绘制方法
左上角为原点 x 向右边生长 y向 下生长
canvas 默认大小是 300*150

矩形绘制
clearRecr(double x,double y,double w,double h);
fillRect(double x,double y,double w,double h);
strokeRect(double x,double y,double w,double h);
x y 是只他的坐标 w 宽度 就是 矩形横着的长度h 矩形树立的长度
html5 canvas 只不过是js的操作而已 对现在的我来说
html代码中只哟是这样的就好
<canvas id="canvas" height="?" width="?'>
</canvas>
clearRect() 就是清理
fillRect()填充
strokeRect()描边

第一个例子

输入代码var canvas=document.getElementBy("canvas");
var context=canvas.getContext('2d');
context.lineJoin='round';
context.lineWidth=30;
context.font="38px Helvetica";
context.fillText('click anywhere to erase',175,400);
context.strokeText('click anywhere to erase',175,400);
context.strokeRect(75,100,200,200);
context.fillRect(325,100,200,200);
context.canvas.onousedown=function(e){
  context.clearRect(0,0,canvas.width,canvas.height);
}

关于颜色 的透明度
hsla()
rgba()
中的第4个量中的才是透明度
渐变色
var canvsa=document.getElementById('canvas');
var context=canvas.getContext('2d');
var gradient=context.createLinearGradient(0,0,canvas.width,0);
gradient.addColorStop(0,'blue');
gradient.addColorStop(0.25,'white');
gradient.addColorStop(0.5,'yellow');
gradient.addColorStop(0.75,"red");
gradient.addColorStop(1,'yellow');

context.fillStyle=gradient;
context.rect(0,0,canvas.width,canvas,height);
可以换成
var gradient=context.createRadiaGradient(canvas.width/2,canvas.heihgt/2,10,
canvas.width,0,100)；
感觉渐变没啥用啊？
除非让他gradient.addColorStop(0-1,颜色);
0-1的参数可变 产生一种正在加载的效果 我也不知道可不可以

       接下来是我学了图案的使用
恩 我老是打都没实现  我在抄一遍也应该是错的

好吧我还是不打例子了 我又不是大神 我也累了
说下 我学了啥 *以后 就要 把代码记下来

context.createPattern(image,多选)
可以是
repeat
repeat-x
repeat-y
no-repeat
mage 规定要使用的图片、画布或视频元素。
repeat 默认。该模式在水平和垂直方向重复。
repeat-x 该模式只在水平方向重复。
repeat-y 该模式只在垂直方向重复。
no-repeat 该模式只显示一次（不重复）。
image 可以是 《img id="img"...》
var img=document.getElementById('img')
context.createPattern('img',' ?');
shadowColor
shadowOffsetX
shadowOffsetY
shadowBlur
stroke();
fill()
对路径进行描边 和填充
beginPath() 会清除 前面 子路径