canvas-旋转

作者: 星空有月 | 来源:发表于2016-12-25 20:48 被阅读24次

因为canvas在画过之后就不能再进行修改,多以要先运动最后在画。

function d2a(n){
  return Math.PI*n/180;
}
var oC = document.getElementById('c1');
var gd = oC.getContext('2d');
gd.translate(100+100,100+50);//移动到x加上矩形宽度一半
gd.rotate(d2a(45deg));
gd.strokeRect(-100,-50,200,100);//画的定位点是负宽度的一半,负高度一半,宽,高

这就实现了canvas上面的矩形沿中心点选择45度。

相关文章

  • canvas-旋转

    因为canvas在画过之后就不能再进行修改,多以要先运动最后在画。 这就实现了canvas上面的矩形沿中心点选择45度。

  • Canvas-图片旋转

    文章来源 https://www.cnblogs.com/suyuanli/p/8279244.html[http...

  • canvas基础知识总结

    一、Canvas-绘制文字 1、属性 二、canvas-设置阴影 三、canvas-创建路径-绘制矩形和圆形 1、...

  • Canvas-旋转-Day02

    HTML5绘图之文字旋转 HTML5绘图之文字旋转在GDI/GDI+中文字旋转是一件比较容易的事情,HTML5的C...

  • 小程序canvas-旋转图片

    最近写小程序遇到一个需求,需要旋转图片再上传到服务器,就想到了用canvas来实现。 描述 元素本身并没有绘制能力...

  • canvas小游戏-爱心鱼(含源码下载地址)

    **最后完成效果 源代码地址:https://github.com/zhaoyuMua/canvas- 1、准备工...

  • NFH.006 - Canvas高级与Chart.js

    12.16学习经验分享# Bruce_Zhu于2016.12.16 一、canvas-创建路径绘制线条(直线和折线...

  • Canvas-基础

    坐标系 css中的宽高不是画布的大小,当设置了css宽高,画布会随之缩放如果你的canvas的宽高是100,100...

  • canvas-基础

    创建一个canvas HTML 创建canvas元素 设置宽高使用标签width,height属性,注意不能使用c...

  • canvas-柱状

    学习了这么多Canvas中的API,是时候出来溜溜了,写一个low版的柱状图吧!先瞜一眼效果图: 分析一下简版思路...

网友评论

    本文标题:canvas-旋转

    本文链接:https://www.haomeiwen.com/subject/bpsdvttx.html