在HTML5的画布元素上进行绘画操作

#!usr/bin/env python
#-*- coding:utf-8 -*-
#在HTML5的画布元素上进行绘画操作

import unittest,time
from selenium import webdriver

class TestDemo(unittest.TestCase):
    def setUp(self):
        self.driver = webdriver.Chrome()

    def test_HTML5Canvas(self):
        url = ‘http://www.w3school.com.cn/tiy/loadtext.asp?f=html5_canvas_line‘
        self.driver.get(url)
        self.driver.execute_script("var c = document.getElementById(‘myCanvas‘);"
                                   #getElementById(‘myCanvas‘);获取页面上的画布元素
                                   + "var cxt = c.getContext(‘2d‘);"
                                   #var cxt = c.getContext(‘2d‘);设定画布为2d
                                   + "cxt.fillStyle = ‘#FF0000‘;"
                                   #cxt.fillStyle = ‘#FF0000‘;设定填充色为红色
                                   + ‘cxt.fillRect(0,0,150,150);‘)
                                   #cxt.fillRect(0,0,150,150);在画布上绘制矩阵
        time.sleep(3)
        self.driver.save_screenshot("e:\\HTML5Canvas.png")

    def tearDown(self):
        self.driver.quit()

if __name__ == ‘__main__‘:
    unittest.mian()

原文地址:https://www.cnblogs.com/sleeping-cat/p/8278726.html

时间: 2024-08-14 09:21:15

在HTML5的画布元素上进行绘画操作的相关文章

HTML5 canvas画布元素 制作 动态花朵动画

废话不多说 先上代码 <!doctype> <html> <head> <meta charset="utf-8"> </head> <body style="text-align:center;"> <canvas id="canvas" width="1300px" height="580px" style="bor

3、selenium 实现鼠标移动到元素上,并操作元素(鼠标放上后才出现的元素)点击

1.获取鼠标将移动到的元素 List<WebElement> list1 = driver.findElement(By.id("AAA")).findElements(By.className("BBB")); WebElement we = list1.get(0);2.鼠标移动 action.moveToElement(we).perform();3.等待3s Thread.sleep(4000);4.JavascriptExecutor 定义 J

HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素

欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制图片 绘制文本 相关要求 环境要求:Google Chrome, Firefox, Safari, Opera, 或者 IE9以上的现代浏览器 编程要求:需要有基础的HTML和Javascript编程经验,相关的画布编程将调用Javascript API来处理 HTML Canvas基本元素 HTM

HTML5 Canvas 画布

一.Canvas是什么? canvas,是一个画布,canvas元素用于在网页上绘制图形. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 二.创建Canvas元素 加上基本的属性:类,宽度和高度 <canvas class="MyCanvas" width:100px height:100px></canvas> 三.绘制路径 使用的是javascript元素来绘制,canvas本省不具备绘图的能力.所有的绘制必须通过javascript

利用HTML5技术在Web上实现对图形图像的处理——WebPhotoshop精简版

WebPhotoshop精简版是利用HTML5技术在Web上实现对图形图像的处理,构建易维护.易共享.易于拓展.实时性的Web图形图像处理平台. 精简版功能包括:图形绘制.图像处理.图像操作.完整版包括多人协作操作图像.实时交流.图片搜索,同时实现实时的多人协作处理图形图像技术.(完整版后续上传)一.功能说明:1.图形绘制 实现铅笔.画笔(书法画笔.喷枪.蜡笔.记号笔.水彩画笔)的绘制效果.实现直线.曲线.椭圆(圆).矩形(圆角矩形).三角形(直角三角形.等边三角形.任意三角形).多边形的绘制.

canvas 使用 isPointInPath() 判断鼠标位置是否在绘制的元素上

canvas 里绘制的图形不是一个实体 DOM,所以要给每个绘制的图形添加事件操作比给 DOM 添加事件要复杂很多. 所以,我们需要使用一个 canvas 的 isPointInPath(x, y) 方法,来获取鼠标相对于浏览器的坐标,然后还需要计算出鼠标相对于 canvas 画布的坐标,最后通过 isPointInPath(x, y) 方法判断此坐标是否在绘制的元素上,进行相应的操作. isPointInPath() 方法是针对的当前绘制的路径,而鼠标在执行操作的时候,我们会根据需要监听鼠标的

前端新技术:HTML5实现网页元素的拖动操作

HTML5之前,要实现网页元素的拖动操作,需要依靠mousedown.mousemove.mouseup等API,通过大量的JS代码来实现:HTML5 中引入了直接支持拖动操作的API,大大简化了网页元素的拖动操作编程难度,并且这些API除了支持浏览器内部元素的拖动外,同时支持浏览器和其它应用程序之间的数据互相拖动. 本文通过一个简单示例,演示HTML5中拖动API的使用方法. 场景: 如下图所示,我们要实现: 通过拖动将照片从左侧"相册"区域拖拽到右侧"垃圾箱"区

HTML5 &lt;template&gt;标签元素简介

一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是"模板元素". 目前,我们在HTML中嵌入模板HTML,往往是类似这样的写法: <script type="text/template"> // ... </script> 实际上,并不存在type="text/template"这样的标准写法,<template&g

相比于HTML4,HTML5废弃的元素有哪些?

第一类:表现性元素basefontbigcenterfontsstrikettu建议用语义正确的元素代替他们,并使用CSS来确保渲染后的效果 第二类:框架类元素因框架有很多可用性及可访问性问题,HTML5规范将以下元素移除.frameframesetnoframes但html5支持iframe. 第三类:属性类很多表现性的属性也被新规范移除,如下:alignbody标签上的link.vlink.alink.text属性bgcolorheight和widthiframe元素上的scrolling属