Question

在HTML画布中编程时，画布的js尺寸并不总是与css尺寸匹配。为什么会发生这种情况？我该如何解决这个问题？

Answer 1

我发现了问题。当你必须设置width和height属性时，我正在设置使用CSS的尺寸。这导致它被拉伸/倾斜。

import UIKit
import Dotzu

class MagicController: UIViewController, UIGestureRecognizerDelegate {
    let action = #selector(MagicController.buttonTapped(_:))
    let action2 = #selector(MagicController.secondButtonTapped(_:))
    let mainAction = #selector(MagicController.mainButtonTapped(_:))

    let defaultPalette = Palette.randomPalette()
    var questions = [Question]()
    var startTime = TimeInterval()
    var endTime = TimeInterval()
    var selectedTimeIndex = 0
    var selectedTagIndex = 0
    var selectedRatingIndex = 0
    var selectedTag = "swift"
    let timeSpanDropDown = DropDown()
    let ratingDropDown = DropDown()
    let tagDropDown = DropDown()
    var pageNumber = 1
    var savedIndex = 0
    var savedPostId = -1
    var quotaCount = -1
    var isFirstTime = true

    let queryFactory = Queries(client: APIClient())

    var timeSpanButton = UIBarButtonItem()
    var ratingButton = UIBarButtonItem()
    var tagButton = UIBarButtonItem()
    var dbButton = UIBarButtonItem() // 


/// start the console log, configure the main view's buttons/actions and present the UI
    override func viewDidLoad() {
        super.viewDidLoad()
        Dotzu.sharedManager.enable()
        self.edgesForExtendedLayout = []
        configureButtons(container: view)
        view.setNeedsLayout()
    }

    ///configure the buttons/actions, prepare and present the UI
    /// The first time this is called it sets up the buttons and drop downs
    /// cleanupDataSource() has no effect the first time it is called
    /// - Parameter animated: passed to super
    override func viewWillAppear(_ animated: Bool) {
            super.viewWillAppear(animated)
            if isFirstTime {
                isFirstTime = false
                initializeButtons()
                setupDropDowns()
            }
            cleanupDataSource()
        }
/// etc.
}

http://jsfiddle.net/h2yJn/66/

Answer 2

您可以尝试将画布的宽度和高度设置为等于窗口对象的尺寸：

function createCanvas() {
    var ctx = //the canvas context;
    ctx.canvas.width  = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
   //your code
}

此外，最好将body和html标签设置为窗口的整个宽度：

body, html{
     height: 100%;
     width:  100%;
}

Answer 3

您也可以使用纯javascript并根据CSS值在javascript中设置画布的尺寸来执行此操作：

//Get Canvas
var canvas = document.getElementById("canv");

// Get computed style of the canvas element.
var cstyle = window.getComputedStyle(canvas);

// Returns the width as str in px: e.g. 600px.
// Parse resolves that issue.
canv.width = parseInt(cstyle.width);
canv.height = parseInt(cstyle.height);

演示： https://jsfiddle.net/ofaghxfq/2/

帆布的高度和宽度

3 个答案: