码迷,mamicode.com
首页 > Web开发 > 详细

操作 HTML5 中的 Canvas 绘制图形

时间:2015-06-05 15:20:10      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:

测试 http://literallycanvas.com/

以 Chrome Driver 为例阐述,通过 Actions 在 Canvas 上绘制一个封闭图形。对于 Canvas 上的操作,推荐 Chrome Driver 或 Firefox Driver

示例:

package com.learningselenium.html5;

 

import org.junit.After;

import org.junit.Before;

import org.junit.Test;

import org.openqa.selenium.By;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.WebElement;

import org.openqa.selenium.chrome.ChromeDriver;

import org.openqa.selenium.interactions.Actions;

 

public class testHTML5Canvas{

  WebDriver driver;

 

  @Before

  public void setUp() throws Exception{

    System.setProperty("webdriver.chrome.driver", "/Selenium 2/selenium/chromedriver");

    driver = new ChromeDriver();

    driver.get("http://literallycanvas.com/");

  }

 

  @Test

  public void testHTML5Canvas() throws Exception{

    //元素不存在,有问题 “div.literally.index div.lc-drawing canvas”

    WebElement canvas = driver.findElement(By.xpath("//*[@id = \"about\"]/div[1]/canvas"));   

    Actions drawing = new Action(driver);

    //绘制图形

    driver.clickAndHold(canvas).moveByOffset(10,50).moveByOffset(50,10).moveByOffset(-10,-50).moveByOffset(-50,-10).release().perform();

  }

 

  @After

  public void tearDown() throws Exception{

    driver.quit();

  }

}

 

操作 HTML5 中的 Canvas 绘制图形

标签:

原文地址:http://www.cnblogs.com/feifeidxl/p/4554651.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!