文档章节

HTML5之帆布(canvas)(三)

博为峰教研组
 博为峰教研组
发布于 2016/12/12 14:50
字数 467
阅读 5
收藏 0
点赞 0
评论 0

实例演示

现在,我们开始通过一个实例来学习使用画布绘制矩形,圆,文本,图片等功能先看看效果:

建立HTML,并增加表格表单

先新建一个HTML的页面,并增加表格表单控件

<!DOCTYPE HTML>

<html>

<head>

    <title>TweetShirt</title>

    <meta charset="utf-8">

    <style>

        canvas{

            border: 1px solid black;

        }

    </style>

 

    <script src = "tweetshirt.js">

    </script>

</head>

 

<body>

    <h1>TweetShirt</h1>

    <canvas id="tshirtCanvas" width="600" height="200">Please upgrade your browser to use TweetShirt!</canvas>

 

    <form>

        <p>

            <label for="backgroudColor">选择背景颜色: </label>

            <select id = "backgroundColor">

                <option value="white" selected="selected">白色</option>

                <option value="black">黑色</option>

            </select>

        </p>

 

        <p>

            <label for="shape">选择图形: </label>

            <select id = "shape">

                <option value="none" selected="selected">无</option>

                <option value="circles">圆形</option>

                <option value="squares">正方形</option>

            </select>

        </p>

 

        <p>

            <label for="foregroundColor">选择前景颜色: </label>

            <select id = "foregroundColor">

                <option value="black" selected="selected">黑色</option>

                <option value="white">白色</option>

            </select>

        </p>

 

        <p>

            <input type="button" id="previewButton" value="预览">

        </p>

 

    </form>

</body>

</html>

JavaScript的处理表单控件

新建一个JavaScript的文件tweetshirt.js,首先启动预览按钮,这样点击这个按钮时它就会调用一个JavaScript的函数来处理画布绘制

window.onload = function () {

    var button = document.getElementById("previewButton");

    button.onclick = previewHandler;

}

 

<!--预览点击事件-->

function previewHandler() {

    var canvas = document.getElementById("tshirtCanvas");

    var context = canvas.getContext("2d");

 

    //绘制图像之前,重置之前绘制的内容

    fillBackgroudColor(canvas,context);

 

    //查看界面选择了哪种颜色

    var selectObj = document.getElementById("shape");

    var index = selectObj.selectedIndex; //得到表单控件选项的编号的数组

    var shape = selectObj[index].value; //得到选项的值

 

    if (shape == "squares") {

        for(var squares = 0 ; squares < 20; squares++) {

            //绘制正方形

            drawSquare(canvas,context);

        }

    }

 

    if (shape == "circles") {

        for(var circles = 0 ; circles < 20; circles++) {

            //绘制圆

            drawCircle(canvas,context);

        }

    }

    //绘制文本

    drawText(canvas,context);

    //绘制图片

    drawImage(canvas,context);

}

 

function fillBackgroudColor(canvas,context) {

    var selectObj = document.getElementById("backgroundColor");

    var index = selectObj.selectedIndex;

    var bgColor = selectObj[index].value;

 

    //fillStyle保存画布上完成绘制时所用的颜色,它是一个属性而不是方法,所以需要设置而不是调用

    context.fillStyle = bgColor;

    context.fillRect(0,0,600,200);

}

 

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 49
博文 1224
码字总数 479077
作品 0
黄浦
程序员
超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员 ⋅ 04/25 ⋅ 0

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

html5-web本地存储

在html5中为我们提供了一种本地缓存机制,它将取代我们的cookie,并且它是不会随浏览器发会我们的服务器端的。我们可以采用js在客户端自由的操作本地缓存。html5中缓存主要有localStorage,和...

zting科技 ⋅ 2017/01/10 ⋅ 0

php canvas 前端JS压缩,获取图片二进制流数据并上传

效果图(canvas压缩图片会失真): 参考: php canvas 前端JS压缩,获取图片二进制流数据并上传 https://www.cnblogs.com/-mrl/p/8708114.html js+php如何实现上传图片 https://www.jianshu....

豆花饭烧土豆 ⋅ 05/30 ⋅ 0

Web前端最全面试宝典- Html篇

HTML 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访...

颜卿今天Coding了吗 ⋅ 2017/03/04 ⋅ 0

《WebGL编程指南》学习笔记——2.使用元素

《WebGL编程指南》学习笔记——2.使用< canvas >元素 上一节初步认识了WebGL,这一小节我们来开始学习使用< canvas >元素绘制二维图形 WebGL编程指南学习笔记2使用 canvas 元素 下小节我们正...

hushhw ⋅ 2017/12/16 ⋅ 0

使用canvas在前端实现图片合成

看着总结的不错,我也就拿来主义了,做个记录,侵权必删 图片合成最常见的需求有验证码图片,亦或者图片加水印等,这种实现一般都是后端实现的。 随着HTML5发展和现代浏览器的占比越来越高,...

xllily_11 ⋅ 02/26 ⋅ 0

Fabric.js 2.3.3 发布,简易 JavaScript Canvas 库

Fabric.js 2.3.3 已发布,主要是修复了文本 Trailing 和 zwj 。#5048 Fabric.js 是一款简单而强大的 JavaScript Canvas 库,在 HTML5 Canvas 元素之上提供了互动的对象模型,同时还包含 Canv...

王练 ⋅ 前天 ⋅ 0

前端新人关注的Web前端饱和性分析?前端面试必知必会的十点!

现在前端市场是不是已经饱和了?巴巴巴巴巴...... 还有:XXX行业是否已经饱和? angular1.5是不是已经被淘汰? 前端还有前途吗? bootstrap为什么被称为垃圾框架?等等等 不是博主不友好,只...

web前端05 ⋅ 06/15 ⋅ 0

HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN ⋅ 05/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 57分钟前 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 2

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部