HTML5之帆布（canvas）（三）

实例演示

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

建立HTML，并增加表格表单

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

<!DOCTYPE HTML>

<html>

<head>

<title>TweetShirt</title>

<style>

canvas{

border: 1px solid black;

}

</style>

</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>

</p>

<p>

</select>

</p>

<p>

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

</select>

</p>

<p>

</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);

}

HTML5之帆布（canvas）（三）相关推荐

html5怎么修改图片大小,HTML5 javascript修改canvas的大小
方法1: 设定固定的值,这种方式跟在html中设定canvas的值没有什么区别: window.onload = function(){ canvas.height = 100; canvas.wid ...
html5中用画布画小狗,HTML5中的Canvas（绘制）
Canvas中不仅可以画线(路径),还能画很多其他的图像,这一章就介绍Canvas的其他两种绘图API. 矩形我们在上一章只用线来画了一个矩形,其实可以一下子就画出来的,用下面函数: ctx.fil ...
html根据坐标画圆,Canvas三种动态画圆实现方法说明(小结)
前言 canvas是HTML5出来的绘图API容器,对于图形的处理非常强大,下面使用canvas配合JavaScript来做一下动态画圆效果.可以用它来做圆形进度条来使用. 这里我个人总结了3种实现方 ...
HTML菊花图案绘制,用HTML5中的canvas元素画菊花
用html5中的canvas画出的三种菊花,书上看到的例子,拿来当联系玩. 使用Canvas元素绘制美丽的花朵 var context; var A,n; function btn_onclick() ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
HTML5 中的canvas元素用于,HTML5中的Canvas元素
canvas 元素用于在网页上绘制图形. 什么是Canvas? HTML 5 的canvas元素使用JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas ...
html5画布页面,HTML5 界面元素 Canvas 参考手册
HTML5 界面元素 Canvas 参考手册转载请保留此句:太阳火神的美丽人生 - 本博客专注于敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否 ...
canvas插件_HTML系列之-HTML5新元素之Canvas详解
课程简介: 课程目标:通过本课程学习,掌握HTML5中图形绘制canvas的基本原理和使用,并利用canvas解决实际相关问题. 适用人群:具有一定html.css.javascript开发基础的人员 ...
用html语言编写笑脸,怎么使用HTML5中的Canvas绘制笑脸
怎么使用HTML5中的Canvas绘制笑脸发布时间:2021-02-26 09:33:14 来源:亿速云阅读:75 作者:清风这篇"怎么使用HTML5中的Canvas绘制笑脸" ...
php代码输出笑脸,利用HTML5中的Canvas绘制笑脸的代码
这篇文章主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是HTML5中的基本功能,需要的朋友可以参考下今天,你将学习一项称为Canvas(画布)的web技术,以及 ...

HTML5之帆布（canvas）（三）

HTML5之帆布（canvas）（三）相关推荐

最新文章

热门文章