canvas
未玄
这个作者很懒,什么都没留下…
展开
-
canvas 的 图形组合方式
* 设置图形的组合方式:* 两个概念:* a, 源(source):要绘制的新图形* b, 目标(destination): 可能已经绘制了图形的 2D 渲染上下文* 11个属性值;* 1,source-over:绘制两者 源在目标上* 2,destination-over:绘制两者 目标在源上* 3,source-atop:绘制目标 和 源与目标重合的部分* ...原创 2018-09-01 11:46:56 · 1224 阅读 · 0 评论 -
canvas的基本方法
基本代码结构<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>02绘制直线</title> </head> <body> <canvas id="原创 2018-09-01 17:05:27 · 4381 阅读 · 0 评论 -
贝塞尔曲线 在 canvas上绘制 曲线
二次贝塞尔曲线quadraticCurveTo(cpx,cpy,x,y);cpx,cpy 控制点x,y 终点context.quadraticCurveTo(-500,-200,0,300)三次贝塞尔曲线三次贝塞尔曲线:* bezierCurveTo (cpx1,cpy1,cpx2,cpy2,x,y);* 两个控制点,一个目标点context.bezi...原创 2018-09-01 17:20:25 · 1141 阅读 · 0 评论 -
全局阿尔法 globalAlpha
globalAlpha : 设置整个 Canvas 透明度的基数;如果再设置透明度会在该基础上乘以设置的透明度context.globalAlpha = 0.5; context.fillStyle = "rgba(255,0,0,0.75)";//实际透明度 0.5*0.75context.fillRect(100,100,200,100); ...原创 2018-09-01 17:22:25 · 1747 阅读 · 0 评论 -
canvas 的 transform与settransform translate scale
translatecontext.translate(x,y):移动坐标原点到 (x,y);原点默认值在canvas 左上角;context.translate(500,400)context.beginPath()context.moveTo(0,0)context.lineTo(500,0)context.moveTo(0,0)context.lineTo(0,4...原创 2018-09-01 17:15:30 · 467 阅读 · 0 评论