文档章节

HTML5之帆布(canvas)(三)

博为峰教研组
 博为峰教研组
发布于 2016/12/12 14:50
字数 467
阅读 5
收藏 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);

}

 

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
再来 10 个新鲜的 HTML5 教程

HTML5 火吗?看看 oschina 三天两头的 xx 个 xxx 就知道了。本文为你推荐最新的 10 个 HTML5 相关的教程,或许能启发你项目中的思路。 1. HTML5 canvas – Creating own Paint program Canva...

红薯
2011/11/15
3.9K
4
30 个必须看的 HTML 5 教程

HTML5 和 CSS3 拓展了Web 设计的可能性。有很多大量的设计师和开发者在web设计中开始学习并使用HTML 5。 这次我们推荐的30个有用的HTML 5 教程,相信会帮助开发者提升技能。列表如下: Maki...

小卒过河
2011/07/29
15.9K
7
10 在线工具用来简化 HTML5 编码

HTML5 肯定是会彻底改变我们创建的网站和Web应用程序。在这篇文章中,编制了10个非常强大的工具,以简化和增强你的HTML5的编码。 Initializr Initializr会为你生成一个干净的可定制的模板,基...

红薯
2011/08/16
3.1K
3
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
推荐10款非常优秀的HTML5开发工具

HTML5发展如火如荼,随着各大浏览器对HTML5技术支持的不断完善以及HTML5技术的不断成熟,未来HTML5必将改变我们创建Web应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助...

长平狐
2012/10/09
156
0

没有更多内容

加载失败,请刷新页面

加载更多

二十分钟教你如何将区块链应用与函数计算相结合

前言 本篇文章适合对区块链应用感兴趣或是想要通过函数计算服务进一步开发区块链应用的新人。本文将结合阿里云区块链服务、阿里云函数计算服务、阿里云日志服务 以及社区应用 Marbles,手把手...

阿里云官方博客
4分钟前
0
0
Double数相加后结果不准确

在我们进行两个double运算时,例如:2..0-1.1 不是想象的输出0.9,而是0.89999999999999999。其主要原因是浮点数值采用二进制系统表示,而在二进制系统中无法精确的表示分数1/10。这就好像十...

嘴角轻扬30
11分钟前
0
0
去除移动端点击效果

移动端点击时,会有一个类似active的短暂背景淡出效果,去除该效果可使用 -webkit-tap-highlight-color: rgba(255, 0, 0, 0);

originDu
13分钟前
0
0
腾讯云与MariaDB 基金会签署战略合作,共建全球开源生态圈

本文由云+社区发表 腾讯云日前与MariaDB基金会正式签署战略合作协议,2019年,腾讯云将继续以白金会员身份为基金会的发展提供强有力的资源支持,与MariaDB全球用户和开发者一道,共建开放共赢...

腾讯云加社区
18分钟前
1
0
Kotlin的SAM(Single Abstract Method)

今天有人在群里问kotlin支持SAM的问题,其实kotlin不支持SAM,因为人家支持FP(function programing) package reactinterface Test { fun print()}class TestInterface(var...

SuShine
19分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部