Canvas绘制图形图像

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>//矩形function drawRect(id){var canvas = document.getElementById(id);var content = canvas.getContext("2d");content.fillStyle = "#FF0000";//定义填充色content.fillRect(0,0,200,200);//定义起点0,0 宽200 高200}//线条function drawLine(id){var canvas = document.getElementById(id);var context = canvas.getContext("2d");context.moveTo(50,50);//定义线条起点context.lineTo(100,50);//从起点开始移动context.lineTo(50,50);//从上面的终点开始移动context.stroke();}//三角形function drawLineThree(id){//获取Canvas对象(画布)var canvas = document.getElementById(id);//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误if(canvas.getContext){//获取对应的CanvasRenderingContext2D对象(画笔)var ctx = canvas.getContext("2d");//开始一个新的绘制路径ctx.beginPath();//设置线条颜色为蓝色ctx.strokeStyle = "blue";//设置填充色ctx.fillStyle = "red";//设置路径起点坐标ctx.moveTo(20, 50);//绘制直线线段到坐标点(60, 50)ctx.lineTo(20, 100);//绘制直线线段到坐标点(60, 90)ctx.lineTo(70, 100);//先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。ctx.closePath();//填充颜色ctx.fill();//最后，按照绘制路径画出直线ctx.stroke();}}//圆function drawArc(id){var canvas = document.getElementById(id);var context = canvas.getContext("2d");//定义径向渐变色var rg =context.createRadialGradient(50, 50, 0, 50, 50, 20);rg.addColorStop(0,'red');rg.addColorStop(0.5,'yellow');rg.addColorStop(1,'blue');context.fillStyle = rg;//定义填充色context.beginPath();/*cx  水平坐标cy  垂直坐标radius  半径start-angel  圆周起始位置end_angle  弧长 Math.PI是半圆  Math.PI*2是整个圆  0.5为四分之一direction 顺、逆时针  false为逆时针，true为顺时针（决定了圆弧的方向）*/context.arc(50,50,20,0,Math.PI*2,true);context.closePath();context.fill();}//横向渐变function drawLinearGradient(id){var c=document.getElementById(id);var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);}//图像function drawImg(id){var canvas = document.getElementById(id);var context = canvas.getContext("2d");var img = new Image();img.src = "1.png";//html5在使用drawImage绘图的时候，出现不显示的问题，原来要想是图片正常显示需要为图片添加一个onload事件img.onload = function(){context.drawImage(img,100,100);}context.drawImage(img,100,100);}</script>
</head>
<body οnlοad="drawRect('canvasid')"><canvas id="canvasid" width="500" height="500"></canvas>
</body>
</html>

Canvas绘制图形图像相关推荐

使用H5新增的canvas绘制图形
一.绘制文本 <!DOCTYPE html> <html lang="zh-cn"><head><meta charset="U ...
- Canvas 简介- 使用 Canvas 绘制图形- Canvas 常用方法- SVG 简介- 使用 SVG 绘制基本图形
1 Canvas 简介 Canvas 表示画布,现实生活中的画布是用来作画的. HTML5 中的 Canvas :我们可以称它为"网页中的画布".默认情况下,Canvas 是一块 ...
html5 canvas绘制图形,html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
【canvas绘制图形】
canvas绘制图形一.绘制圆形二.绘制三角形三. 绘制矩形一.绘制圆形 <!DOCTYPE html> <html lang="en"> < ...
android 自定义多边形,Android:自定义view之Canvas绘制图形
前面讲解了onMeasure,接下来讲解onDraw,onDraw主要就是绘制,也就是我们真正关心的部分,使用的是Canvas绘图. @Override protected void onDraw(C ...
canvas绘制图形
第一步:html5页面中添加canvas元素 <canvas id="myCanvas" width="300" height="300&quo ...
HTML5利用Canvas绘制图形(Canvas基本知识、绘制矩形、使用路径和图形组合)
绘制图形有很多方法,可以借助Flash实现,也可以使用SVG和VML来绘图.本次将要学习一种新的灰土方法--使用Canvas元素,它是基于HTML5原生的绘图功能.使用Canvas元素,可以绘制图形, ...
微信小程序开发—(八)canvas绘制图形
一.小知识 (1).API接口 (2).context 对象的方法列表二.步骤 wxml中: <canvas canvas-id="myCanvas" class=&quo ...
canvas绘制图形API(一）
canvas元素的基础知识 canvas元素是HTML5中的一个新增的重要元素,专门用来绘制图形.在页面上放置一个canvas元素,就相当于在页面上放置了一块"画布",可以在其中进 ...

Canvas绘制图形图像

Canvas绘制图形图像相关推荐

最新文章

热门文章