canvas

canvas 画布标签
strokeRect() 绘制空心矩形
fillRect() 绘制实心矩形
clearRect() 清空绘制的矩形
fillStyle 设置填充颜色
strokeStyle() 设置边框颜色
strokeWidth() 设置边框像素
moveTo() 起点线
lineTo() 结束点
beginPath(): 开始一条路径

closePath():创建从当前点到开始点的路径。
arc() 用于创建有弧度的图形,如:圆,扇形。
语法: 对象.arc(x,y,r,起始角,结束角,ture/false)

canvas 插入图片
语法 1:在画布上定位图像:context.drawImage(img,x,y);

语法 2:在画布上定位图像,并规定图像的宽度和高度:
context.drawImage(img,x,y,width,height);

语法 3:剪切图像,并在画布上定位被剪切的部分:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

设置背景

createPattern(img,平铺方式)平铺图片

canvas渐变

线性渐变:
createLinearGradient(x1,y1,x2,y2)
放射性渐变:
createRadialGradient(x1,y1,r1,x2,y2,r2)

canvas 文本
1.strokeText(文字,x,y)
文字边框

2.fillText(文字,x,y)
文字填充

3.font
文字大小:'40px 宋体'

4.textAlign (左右对齐方式)

默认是start,跟left一样的效果 end right center

5.textBaseLine (上下对齐方式)

 上top 中 middle 下 bottom

阴影:
shadowOffsetX、shadowOffsetY X轴偏移、Y轴偏移
shadowBlur 高斯模糊值
shadowColor
阴影颜色

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 10,190评论 2 32
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 9,364评论 3 40
  • 本文首发于我的个人博客:http://cherryblog.site/github项目地址:https://git...
    sunshine小小倩阅读 6,107评论 1 8
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    J_L_L阅读 5,468评论 0 4
  • 最基本的使用创建一个画布所有的操作都在画布的context上面canvas是基于状态而不是基于对象的,比如说颜色都...
    亲爱的孟良阅读 5,577评论 0 4