博客网
HTML5画布
画布元素
线
线
线条宽度
线条颜色
线帽
曲线
弧
二次曲线
贝塞尔曲线
路径
路径
线条连接
圆角
形状
自定义形状
长方形
圆圈
半圆
椭圆形
填充样式
颜色填充
线性渐变
径向渐变
图案
图像
绘制图像
图像大小
图像裁剪
图像加载器
文本
字体、大小和样式
文本颜色
文本笔划
文本对齐
文本基线
文本度量
文本换行符
转换
转换
比例
旋转
自定义变换
剪切
镜子
重置变换
状态堆栈
复合材料
阴影
全局Alpha
剪裁区域
操作
图像数据和URL
图像数据
反色
灰度
获取数据URL
加载数据URL
保存绘图
动画
清除画布
动画帧
线性运动
加快
振荡
启动和停止
鼠标检测
鼠标坐标
剪切
代码
运行
<!DOCTYPE HTML> <html> <head> <title>剪切</title> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var rectWidth = 150; var rectHeight = 75; // shear matrix: // 1 sx 0 // sy 1 0 // 0 0 1 var sx = 0.75; // .75 horizontal shear var sy = 0; // no vertical shear // translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); // apply custom transform context.transform(1, sy, sx, 1, 0, 0); context.fillStyle = 'blue'; context.fillRect(-rectWidth / 2, rectHeight / -2, rectWidth, rectHeight); </script> </body> </html>