canvas
关注
分享
扫一扫
??or??
好好学习，天天向上
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
canvas学习笔记（八）---- 基本动画
1.用window.setInterVal()、window.setTimeOut（）和window.requestAnimationFrame()来定期执行一个指定函数setInterval（function，delay）setInterval（function，delay）requestAnimationFrame(callback)2.drawImage(img,sx,...原创 2019-11-09 17:44:56 · 391 阅读 · 0 评论 -
canvas学习笔记（七）----裁切路径
clip（）将当前的路径转换为裁剪路径只能用一次，后续再用，不起作用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1....原创 2019-11-08 17:01:02 · 543 阅读 · 0 评论 -
canvas学习笔记（六）----变形
1.save（）保存画布的所有状态2.restore（）恢复状态3.translate（x，y）左右偏移量和上下偏移量4.rotate（angle）旋转的角度5.scale(scaleWidth,scaleHeight)缩放的长度和宽度(1=100%,0.5=50%)<!DOCTYPE html><html lang="en"><head&g...原创 2019-11-08 16:45:39 · 193 阅读 · 0 评论 -
canvas学习笔记（五）----图像
图片源：统一由CanvasImageSource类型引用1.HTMLImageElement ：由Image（）函数构造出来，或者任何的<img>元素2.HTMLVideoElement：用一个HTML的<video>元素作为图片源，可以从视频中抓取当前帧作为一个图像3.HTMLCanvasElement：可以使用另一个<canvas>元素作为图...原创 2019-11-08 12:25:36 · 382 阅读 · 0 评论 -
canvas学习笔记(四）----绘制文本
1.fillText（text,x,y[,maxWidth]）在指定的（x,y）位置填充指定的文本，绘制的最大宽度是可选的2.strokeText(text,x,y,[,maxWidth])在指定的（x,y）位置绘制文本边框，绘制的最大宽度是可选的3.font = value 文本的字体样式4.textAlign = value 文本对齐方式，start、end、left、right和...原创 2019-11-08 10:57:47 · 184 阅读 · 0 评论 -
canvas学习笔记（三）----使用样式和颜色
//颜色fillStyle = color;//设置图形的填充颜色 ctx.fillStylestrokeStyle = color;//设置图形轮廓的颜色 ctx.strokeStyleglobalAlpha = transparencyValue;//设置填充颜色或轮廓颜色的透明度 ctx.globalAlpha//线条样式lineWidth = value;//...原创 2019-11-08 10:31:23 · 484 阅读 · 0 评论 -
canvas学习笔记（二）----绘制路径
1.会使用的函数1）beginPath()新建一条路径，生成后，图形绘制命令被指向路径上生成路径2）closePath()闭合路径后图形绘制命令重新指向到上下文3）stroke()通过线条来绘制图形轮廓4）fill()通过填充路径的内容区域生成实心的图形5）arc(x,y,radius,startAngle,endAngle,anticlockwise)以（x，y）为圆心以ra...原创 2019-11-02 16:52:58 · 402 阅读 · 0 评论 -
canvas学习笔记（一）
<canvas id="tutorial" width="150" height="150"></canvas>1.canvas只有两个属性width和height，若没有设置这两个属性，则初始宽高为300px，150px，是利用DOM.properties设置的如果绘制的是扭曲的图形，要用width和height属性设置宽高，而不是css2.用getCont...原创 2019-11-01 17:42:43 · 259 阅读 · 0 评论